[JAVASCRIPT-DOM] propriété classe CSS
Résolu
sixland
Messages postés
36
Date d'inscription
Statut
Membre
Dernière intervention
-
GexMole -
GexMole -
A voir également:
- [JAVASCRIPT-DOM] propriété classe CSS
- Telecharger javascript - Télécharger - Langages
- Ouvrez cette page. dans le code de la page, modifiez la couleur de fond de la classe .pix. un code de 4 chiffres doit apparaître dans la grille. lequel ? ✓ - Forum Programmation
- Javascript echo ✓ - Forum PHP
- Bluetooth mercedes classe a 2005 - Forum Autoradio
- Enlever le soulignement d'un lien css - Astuces et Solutions
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