[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