[JAVASCRIPT-DOM] propriété classe CSS

Résolu/Fermé
sixland
Messages postés
36
Date d'inscription
mardi 12 mars 2002
Statut
Membre
Dernière intervention
26 juin 2005
- 22 juin 2005 à 12:31
 GexMole - 6 mars 2009 à 12:54
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

HackTrack
Messages postés
618
Date d'inscription
vendredi 26 juillet 2002
Statut
Membre
Dernière intervention
13 juillet 2013
970
24 juin 2005 à 13:42
<!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
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)
6
Merci c'est exactement ce qui me falais ^^
0
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
3
sixland
Messages postés
36
Date d'inscription
mardi 12 mars 2002
Statut
Membre
Dernière intervention
26 juin 2005

26 juin 2005 à 19:58
merci c'est juste ce qu'il me fallait
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Génial plusieurs heures que je cherchais comment modifier la classe d'une div, className n'étant pas référencé dans dreamweaver.
0
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 ^^
0