[CSS/Javascript] Changement des propriété CSS dynamiquement

Version imprimable

14/01/2006, 08h24
heladar

[CSS/Javascript] Changement des propriété CSS dynamiquement

Bonjour à tous,

je sais que l'on peut changer les propriétés css d'un élément dynamiquement avec javascript de cette façon:

document.getElementById("id").style.CSS_propriete_a_changer= "nouvelle_valeur_CSS";

Ma question est la suivante, est-ce qu'il est possible de changer la valeur de la propriété elle même de façon à ce que tous les élément qui pointent sur cette propriété soient changées d'un seul coup.

Merci
14/01/2006, 17h31
efficks

Très bonne question...
Je ne sais pas si c,est possible mais pour contourner le problème, tu pourrais chercher tous les éléments avec un certain nom de classe et changer le nom de la classe visée.
Ça ne répond pas exactement à ta question mais ça peut solutionner ton problème.
15/01/2006, 12h28
hdd

Bonjour,

Pour changer de feuille de style dans du JS, ça doit être

Code:

document.getElementById('element').className = "nouvelleClasse"

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<style type='text/css'>
.rouge{
	background: red;
}
</style>
<script type='text/javascript'>
	function go(){
		sheet = document.styleSheets[0];
		if(document.all)
			sheet.addRule(".vert","background: green");			
		else
			sheet.insertRule(".vert { background: green }", sheet.cssRules.length);
 
 
		document.getElementById('mondiv').className = "vert";
	}
</script>
<div id='mondiv' class='rouge'>
bla bla
</div>
<input type='button' onclick='go()' value='do' />

Attention, ie et firefox ne réagissent pas pareil

tiens meme un truc encore plus générique :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
<style type='text/css'>
#mondiv{
	background: red;
}
</style>
<script type='text/javascript'>
	function getRuleIndex(name){
		var cmpt = 0;
		var index = 0;
		var tab = null;
		var good = false;
 
		while(index<document.styleSheets.length && !good){
			tab = document.all ? document.styleSheets[index].rules : document.styleSheets[index].cssRules;
 
			while(cmpt<tab.length && !good){
				if(tab[cmpt].selectorText.toLowerCase() != name)
					good = true;
				cmpt++;
			}
 
			index++;
		}
 
		return {sheetIndex:index-1,ruleIndex:cmpt-1};
	}
 
	function changeRule(selector,cssText){
		infos = getRuleIndex(selector);
		sheet = document.styleSheets[infos.sheetIndex];
		if(document.all){
			sheet.removeRule(infos.ruleIndex);
			sheet.addRule(selector,cssText);			
		}
		else{
			sheet.deleteRule(infos.ruleIndex);
			sheet.insertRule(selector+"{"+cssText+"}", sheet.cssRules.length);
		}
	}
</script>
<div id='mondiv'>
bla bla
</div>
<input type='button' onclick='changeRule("#mondiv","background-color:green")' value='do' />

15/01/2006, 13h25
heladar
Je ne pense pas que ce soit exactement ce que je voulais. Si j'ai bien compris, le code si-dessus ajoute une règle css et ensuite on l'assigne à un objet.

Ce que je voudrait faire c'est changer la valeur de la propriété elle-même. Un peu comme ceci:
Code:

1 2 3 4 .visibilite{ visiility: hidden; }
devient
Code:

1 2 3 4 .visibilite{ visibility:visible; }
C'est que j'ai beaucoup d'objets qui pointent sur cette propriété et je voudrais les rendrent tous visible d'un seul coup sans avoir à faire des getElementById sur chacun d'eux.

Merci
15/01/2006, 13h28
siddh

Code:

changeRule(".visibilite","visibility: visible;")

?
15/01/2006, 14h03
heladar

Ah oui, tiens donc...

Désolé j'étais entrain d'écrire mon message quand tu as posté le tiens...

Merci!!

fix bug...

Bonjour
Merci pour ce code très utile, j'ai malgré tout du faire qq corrections (bug quand il y avait plusieurs stylesheet). Sinon il fonctionne très bien.

Voici ma version:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
function getRuleIndex(name){
    var cmpt = 0;
    var index = 0;
    var tab = null;
    var good = false;
    while(index<document.styleSheets.length && !good){
        tab = document.all ? document.styleSheets[index].rules : document.styleSheets[index].cssRules;
        cmpt=0;
        while(cmpt<tab.length && !good){
            if(tab[cmpt].selectorText.toLowerCase() == name)
                good = true;
            cmpt++;
        }
 
        index++;
    }
    if (good) {
    return { 
        sheetIndex:index-1,
        ruleIndex:cmpt-1
        };
    }
    return null;
}
 
function changeRule(selector,cssText){
    infos = getRuleIndex(selector);
    if (infos==null)
        return;
    sheet = document.styleSheets[infos.sheetIndex];
    if(document.all){
        sheet.removeRule(infos.ruleIndex);
        sheet.addRule(selector,cssText);
    }
    else{
        sheet.deleteRule(infos.ruleIndex);
        sheet.insertRule(selector+"{"+cssText+"}", sheet.cssRules.length);
    }
}

Je vais quand même regarder du coté de JQuery, pour voir s'ils proposent qq chose