Modification dynamique d'un .css en JS
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:
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:
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:
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:
1
2
| var myObject = document.getElementById("textbox");
CtrlF.log('DUF Binding.xml myObject='+ myObject +'-='); RETOURNE NULL |
Code:
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 !
