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

HackTrack, le vendredi 24 juin 2005 à 13:42:54

+10

<!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

Répondre à HackTrack

2

sixland, le dimanche 26 juin 2005 à 19:58:27

Merci c'est juste ce qu'il me fallait sixland

Répondre à sixland

3

survivor, le lundi 2 juin 2008 à 15:26:20

Génial plusieurs heures que je cherchais comment modifier la classe d'une div, className n'étant pas référencé dans dreamweaver.

Répondre à survivor

4

GexMole, le mercredi 11 février 2009 à 17:23:58

+2

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 ^^

Répondre à GexMole

5

CSS, le vendredi 6 mars 2009 à 12:02:59

+3

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

Répondre à CSS

6

CSS, le vendredi 6 mars 2009 à 12:30:57

+3

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)

Répondre à CSS

7

GexMole, le vendredi 6 mars 2009 à 12:54:05

Merci c'est exactement ce qui me falais ^^

Répondre à GexMole