Dans Firefox, comment changer la couleur du texte dans un treecell en utilisant javascript

Question

CONTEXTE: Je le fragment XUL suivant

<tree id="treeToChange" flex="1"> 
    <treecols> 
    <treecol label = "First Column" id="c1" flex="1"/> 
    <treecol label = "Second Column" id="c2" flex="1"/> 
    </treecols> 
    <treechildren> 
    <treeitem> 
     <treerow> 
     <treecell label="Data for Column 1"/> 
     <treecell label="Data for Column 2"/> 
     </treerow> 
    </treeitem> 
    </treechildren> 
</tree> 

et le fragment css suivant

tree { font-size: 120%; color: green;} 

Cela provoque mes données de colonne à afficher en texte vert.

J'ai beaucoup de ces objets d'arbres sur la page XUL

QUESTION: Dans Firefox, en réponse à un événement de clic, ce qui appelle une routine javascript, comment puis-je configurer les données pour l'objet « treeToChange » dans Colonne 1 rouge et les données dans la colonne bleue?

Answer 1

Il se trouve que l'element.style.color affecte uniquement les têtes de colonne, et que dans Firefox, les cellules dans une structure d'arbre ne peut être affectée par le codage du dataview.

extraits de code suivent:

// DatabaseTreeView: Create a custom nsITreeView 
DatabaseTreeView: function(aTableData, aColumns) { 

this.getCellProperties = function(row,col,props){ 
var aserv=Components.classes["@mozilla.org/atom-service;1"].getService(Components.interfaces.nsIAtomService); 
props.AppendElement(aserv.getAtom("color_"+col.id)); 
props.AppendElement(aserv.getAtom("font_"+col.id)); 
}; 

...

and modify the css as follows

treechildren::-moz-tree-cell-text(color_c1){ color:DarkGreen} 
treechildren::-moz-tree-cell-text(color_c2){ color:Navy} 
treechildren::-moz-tree-cell-text(font_c1){ font-size:120%} 
treechildren::-moz-tree-cell-text(font_c1){ font-size:150%} 

J'espère que cela aide quelqu'un d'autre à l'avenir

Answer 2

La propriété style d'un élément DOM contient toutes les déclarations CSS de cet élément. Le schéma de nommage est légèrement différent (camelCaps au lieu de tirets), mais par ailleurs exactement la même chose.

element.style.color = 'blue'; 

Vous pouvez en savoir plus sur la propriété de style dans le Mozilla javascript manual.

Answer 3

Pour définir la couleur d'un élément, vous pouvez utiliser:

function changecolour(elid, nc) { 
    document.getElementById(elid).style.color = nc; 
} 

Alors

changecolour("c1", "red"); 
var x = document.getElementsByClassName("cell"); 
for (var i = 0; i < x.length; i ++) { 
    changecolour(x, "blue"); 
} 

va changer la couleur des données, si vous ajoutez une classe de cellules aux cellules (à éviter tout conflit avec d'autres arbres dans la doc)

BTW, here est document.getElementsByClassName:

function getElementsByClassName(className, tag, elm){ 
var testClass = new RegExp("(^|\\s)" + className + "(\\s|$)"); 
var tag = tag || "*"; 
var elm = elm || document; 
var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag); 
var returnElements = []; 
var current; 
var length = elements.length; 
for(var i=0; i<length; i++){ 
    current = elements[i]; 
    if(testClass.test(current.className)){ 
     returnElements.push(current); 
    } 
} 
return returnElements; 

}