In firefox, wie Farbe des Textes in einem treecell mit Hilfe von JavaScript ändern
-
22-07-2019 - |
Frage
HINTERGRUND: Ich habe folgendes XUL Fragment
<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>
und das folgende CSS-Fragment
tree { font-size: 120%; color: green;}
Dies bewirkt, dass meine Spaltendaten im grünen Text angezeigt werden.
Ich habe viele solche Baumobjekte auf der XUL-Seite
FRAGE: In Firefox, in Reaktion auf einen Klick Ereignis, das eine JavaScript-Routine aufruft, wie kann ich die Daten für das Objekt „treeToChange“ in Spalte 1 roten und die Daten in der Spalte blau eingestellt?
Lösung 3
Es stellt sich heraus, dass die element.style.color nur die Spaltenüberschriften bewirkt, und dass innerhalb von Firefox können die Zellen in einer Baumstruktur nur durch Codieren des Dataview betroffen sein.
Code-Schnipsel wie folgt vor:
// 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%}
Ich hoffe, das jemand anderes in der Zukunft hilft
Andere Tipps
Der Stil Eigenschaft eines DOM-Element enthält alle CSS-Deklarationen für dieses Element. Das Namensschema ist etwas anders (camelcaps statt Striche), aber ansonsten genau gleich.
element.style.color = 'blue';
Sie können mehr über die Unterbringungsarten in der Mozilla JavaScript-Handbuch .
Um die Farbe eines Elements festlegen, können Sie verwenden:
function changecolour(elid, nc) {
document.getElementById(elid).style.color = nc;
}
So
changecolour("c1", "red");
var x = document.getElementsByClassName("cell");
for ( var i = 0; i < x.length; i ++ ) {
changecolour(x, "blue");
}
die Farbe der Daten ändern, wenn Sie eine Zelle Klasse zu den Zellen hinzu (mit anderen Bäumen zu vermeiden, in dem doc in Konflikt)
BTW, hier ist 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;
}