Discussion :

[heladar]

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

[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.

[hdd]

Bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[siddh]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[siddh]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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' />

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

devient

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[siddh]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

?

[heladar]

Ah oui, tiens donc...

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

Merci!!

[Chatastroff]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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