Modification dynamique d'un .css en JS

**dmganges** · 29/08/2013, 19h36

Bonjour,

Dans un module Firefox je voudrais modifier dynamiquement un ficher.css associé.
- J'arrive bien à attribuer dynamiquement une classe existante sur la textbox.
- Je n'arrive pas à récupérer la classe dans le fichier.css pour la modifier :

La textbox dans le fichier.xml :

Code xml :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<xul:textbox anonid="findbar-textbox"
	class="textbox findbar-find-fast"
	oninput="updatecount(true);"
	tooltiptext="&findbar-textbox.tooltip;"
	xbl:inherits="flash"/>
 
 
<xul:checkbox anonid="start-word"
	class="findbar-start-word tabbable"
	label="&start-word.Checkbox.label;"
	dir="reverse"
	accesskey="&start-word.Checkbox.accesskey;"
	tooltiptext="&start-text.Checkbox.tooltip;"
	oncommand="startWord(true);"
	disabled="true"/>

Le fichier.css

Code css :

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
/* findbar-textbox */
 
.textbox {
  -moz-binding: url('chrome://CtrlF/content/binding.xml#findbar-textbox');
  border-radius: 3px;
  border-style: solid;
  border-color: #73B3FF;
  border-width: 1px;
  background-image: -moz-linear-gradient(to top, #FFFF99, #FFFFFF);
  margin: 0px;
}
 
.textbox-startWord-col {
	 background-image:    -moz-linear-gradient(to right, #CC66CC, #FFFFFF);
}
 
.textbox-endWord-col {
	 background-image:    -moz-linear-gradient(to left, #CC66CC, #FFFFFF);
}

La méthode :

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
<method name="startWord">
	<parameter name="aEnable"/>
	<body><![CDATA[
		CtrlF.log('DUF Binding.xml startWord method');
		var color = Components.classes["@mozilla.org/preferences-service;1"]
        	 .getService(Components.interfaces.nsIPrefBranch)
        	 .getCharPref("ui.textHighlightBackground");
       		if (this.getElement("start-word").checked) {
			this.getElement("start-word").style.color = color;	
			this.getElement("findbar-textbox").classList.add("textbox-startWord-col");							
		}	else {
			this.getElement("start-word").style.color = '#000000';
			this.getElement("findbar-textbox").classList.remove("textbox-startWord-col");
		}
		// jusque là c'est OK.  Après je ne sais pas récupérer la classe
		var myObject = document.getElementById("textbox");  
   		CtrlF.log('DUF Binding.xml myObject='+ myObject +'-=');
   		var getStyle = document.styleSheets.item("textbox");
   		CtrlF.log('DUF Binding.xml myObject='+ getStyle +'-=');
	]]></body>
</method>

Code :

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

1
2
var myObject = document.getElementById("textbox");  
 CtrlF.log('DUF Binding.xml myObject='+ myObject +'-=');  RETOURNE NULL

Code :

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

1
2
var getStyle = document.styleSheets.item("textbox");
CtrlF.log('DUF Binding.xml myObject='+ getStyle +'-='); Là J'AI BIEN un STYLE MAIS JE NE SAIS PAS COMMENT L'UTILSER

J'ai fait pas mal d'essais, j'ai trouvé quelques exemples sur du html, xml classique... qui semblent fonctionner, la doc xul de mozilla n'est pas très étendue sur le sujet : 1 2 3 ... rien de tout çà fonctionne puisque je n'arrive même pas à récupérer la classe !

A terme je voudrais modifier dynamiquement .textbox-startWord-col & .textbox-endWord-col

MERCI D'avance !

**sekaijin** · 07/09/2013, 11h59

je ne vois aucun intérêt à changer dynamiquement le CSS
il suffit de récupérer tous les élements ayant une classes pour leur en ajouter ou en supprimer une autre.

donc en créant statiquement la classes et en changeant les liens entre les éléments et les classes ça fonctionne.

tu peux parcourrir le tableau document.styleSheets
l'attribut href permet de savoir quelle est la feuille de style que tu manipule.

chaque cssstyleSheet contient un tableau cssRules
chaque règle corespond à un selecteur selectorText
ce qui te permet de repérer test classes '.vBulletin_editer'
la règle contient un membre tyle qui contient tous les attibuts css

A+JYT

**dmganges** · 07/09/2013, 12h31

MERCI pour ta réponse sekaijin,

Effectivement entre temps j'ai trouvé comment jouer avec l'ajout/suppression de classe !
Je suis nul en anglais et interprète souvent de travers ce que je lis !!!
@+ probablement

Modification dynamique d'un .css en JS

JavaScript

Vue hybride

Discussions similaires

Partager

Partager