[JAVASCRIPT-DOM] propriété classe CSS
Résolu
sixland
Messages postés
36
Statut
Membre
-
GexMole -
GexMole -
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
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);
...
A voir également:
- [JAVASCRIPT-DOM] propriété classe CSS
- Telecharger javascript - Télécharger - Langages
- Javascript void 0 c'est quoi ✓ - Forum Réseaux sociaux
- Javascript echo ✓ - Forum PHP
- A javascript error occurred in the main process - Forum Windows
- Bluetooth mercedes classe a 2005 - Forum Autoradio
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)
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
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question