在firefox中，如何使用javascript更改treecell中文本的顏色

Question

背景：我有以下XUL片段

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

和以下css片段

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

這使我的列數據以綠色文本顯示。

我在XUL頁面上有很多這樣的樹對象

問題：在firefox中，響應單擊事件，該事件調用了javascript例程，如何在第1列的紅色中設置對象“ treeToChange”的數據，在藍色的列中設置數據？

Answer 1

DOM元素的style屬性包含該元素的所有CSS聲明。 命名方案略有不同（camelCaps而不是破折號），但其他方面完全相同。

 element.style.color = 'blue';

您可以在Mozilla javascript手冊中閱讀有關style屬性的更多信息。

Answer 2

要設置任何元素的顏色，可以使用：

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

所以

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

如果將單元格類添加到單元格中，將更改數據的顏色（以避免與文檔中的其他樹沖突）

順便說一句， 這是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;

}

Answer 3

事實證明element.style.color僅影響列標題，而在firefox中，只有通過對dataview進行編碼才能影響樹結構中的單元格。

代碼片段如下：

 // 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%} 

// 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%}

// 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%}

 // 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%} 

我希望這對以后的人有幫助