[JAVASCRIPT-DOM] propriété classe CSS
Résolu
bonjour,
je dois recuperer la propriété de style d'un élément html, cette propriété est contenue dans une feuille de style .css qui est contenu dans une classe css.
si la propriété est declarée dans la balise avec l'attribut 'style' je sais la recuperer mais qd c'est dans une class je n'y arrive pas
en fait j'utilise un
--
sixland
je dois recuperer la propriété de style d'un élément html, cette propriété est contenue dans une feuille de style .css qui est contenu dans une classe css.
si la propriété est declarée dans la balise avec l'attribut 'style' je sais la recuperer mais qd c'est dans une class je n'y arrive pas
en fait j'utilise un
...
alert (document.getElementById('truc').style.height);
...
--
sixland
5 réponses
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Accès aux valeurs CSS avec Javascript</title> <link rel="stylesheet" type="text/css" href="testCss.css" /> <script language="javascript" type="text/javascript"> function testCss(tagRef,element){ alert("L'attribut '"+element+"' du tag '"+tagRef+"' a la valeur '"+getCssValue(tagRef,element)+"'"); } function getCssValue(tagRef,element) { var tag = document.all(tagRef); var value= tag.style[element]; if(value==null || value=='' || value=='undefined'){ var aClass = tag.className; var cssRules = 'rules'; for (var sSheet=0; sSheet < document.styleSheets.length; sSheet++){ for (var rule=0; rule < document.styleSheets[sSheet][cssRules].length; rule++) { var currentClass = document.styleSheets[sSheet][cssRules][rule].selectorText.substring(1); if (currentClass == aClass) { return document.styleSheets[sSheet][cssRules][rule].style[element]; } } } } return value; } </script> </head> <body> <span id="truc1" style="color: blue;"> Div de test 1 </span> <br/> <span id="truc2" class="myClass"> Div de test 2 </span> <br/> <button onclick="testCss('truc1','color');testCss('truc2','color');">Cliquer pour tester</button> </body> </html>
;-)
HackTrack -
Pour lire ou modifier les propriétés CSS inline ou d'une feuille externe, pour FireFox, Internet Explorer, Safari, Opera, voir ce site : http://www.quirksmode.org/dom/w3c_css.html (mise à jour 02/02/2009).
En résumé :
- Accès/modification des styles inline
IE, opera : x.currentStyle
IE : window.getComputedStyle(x,null).color
W3C : x.style
- Accès aux styles des feuilles de styles
FF, opera : document.styleSheets[1].cssRules[1]
IE : document.styleSheets[1].imports
safari : document.styleSheets[1].rules[1]
document.styleSheets[1]
- Modification des sytles des feuilles de styles
IE, safari : document.styleSheets[1].addRule('pre', 'font: 14px verdana')
FF, safari, opera : document.styleSheets[1].deleteRule(1)
var x = document.styleSheets[1];
x.insertRule('pre {font: 14px verdana}',x.cssRules.length)
document.styleSheets[1].removeRule(1)
- Propriétés
x.style.cssText
document.styleSheets[1].cssText
document.styleSheets[1].cssRules[1].cssText
document.styleSheets[1].cssRules[1].style.cssText
document.styleSheets[1].disabled = true
document.styleSheet[0].href
document.styleSheets[1].cssRules[1].selectorText
- Divers
document.createStyleSheet('extrastyle.css')
document.styleSheets[1].cssRules[1].style.getPropertyPriority('color')
document.getElementById('test').style.getPropertyValue('color')
document.styleSheets[1].cssRules[1].style.getPropertyValue('color')
document.styleSheets[1].ownerNode
document.styleSheets[1].cssRules[1].parentStyleSheet
document.styleSheets[1].cssRules[1].style.removeProperty('color')
document.getElementById('test').style.removeProperty('color')
x.style.setProperty('color','#00cc00',null)
document.styleSheets[1].cssRules[1].style.setProperty('color','#00cc00',null) -
Pour lire ou modifier les propriétés CSS inline ou d'une feuille externe, pour FireFox, Internet Explorer, Safari, Opera, voir ce site : http://www.quirksmode.org/dom/w3c_css.html
-
merci c'est juste ce qu'il me fallait
-
Génial plusieurs heures que je cherchais comment modifier la classe d'une div, className n'étant pas référencé dans dreamweaver.
