[JAVASCRIPT-DOM] propriété classe CSS [Résolu/Fermé]

Signaler
Messages postés
36
Date d'inscription
mardi 12 mars 2002
Statut
Membre
Dernière intervention
26 juin 2005
-
 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
...
alert (document.getElementById('truc').style.height);
...


5 réponses

Messages postés
623
Date d'inscription
vendredi 26 juillet 2002
Statut
Membre
Dernière intervention
11 novembre 2012
968
<!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
12
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 58198 internautes nous ont dit merci ce mois-ci

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)
Merci c'est exactement ce qui me falais ^^
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
Messages postés
36
Date d'inscription
mardi 12 mars 2002
Statut
Membre
Dernière intervention
26 juin 2005

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.
Yop, tout le monde !!

ATTENTION Je viens de tester ce petit script et surprise, il ne marche ni sous IE ni sous FF...

Depuis le tps les choses on bien changés :$

Si qqun a trouvé une solution alternative ^^