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

【问题标题】：In firefox, how to change color of text in a treecell using javascript在firefox中，如何使用javascript更改treecell中文本的颜色
【发布时间】：2010-10-01 10:44:54
【问题描述】：

背景：我有以下 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”的数据设置为红色，并将数据设置为蓝色？

【问题讨论】：

我想知道是什么让你认为可以将此片段称为 HTML...
你说得对，它确实是一个 XUL 片段。

标签： javascript css firefox xul

【解决方案1】：

DOM 元素的样式属性包含该元素的所有 CSS 声明。命名方案略有不同（camelCaps 而不是破折号），但在其他方面完全相同。

 element.style.color = 'blue';

您可以在Mozilla javascript manual 中阅读有关样式属性的更多信息。

【讨论】：

需要注意的是，选择元素可以通过使用像jQuery这样的框架来大大简化，它允许你使用CSS样式语法：docs.jquery.com/Selectors
注意：这不适用于树单元格文本，因为它实际上不是 DOM 元素的一部分
这确实适用于树单元，类似于任何其他 DOM 元素 - developer.mozilla.org/en/XUL/treecell（读取底部的继承属性）

【解决方案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");
}

如果向单元格添加单元格类，将改变数据的颜色（以避免与文档中的其他树冲突）

顺便说一句，here 是 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;

}

【讨论】：

Noah 显然只针对 Firefox，因为该片段不是 HTML 而是 XUL。所以 getElementsByClassName 已经被支持了。
这很好用，但是我意识到我需要更具体一点，因为 XUL 页面上有很多树。如何仅选择我正在使用的特定树？（另外，您需要将最后的 } 移回代码块）
注意：这不适用于树单元格文本，因为它实际上不是 DOM 元素的一部分
@Noah：Firefox 有内置的 getElementsByClassName 吗？如果是这样，那真是一个惊喜！ :)

【解决方案3】：

原来 element.style.color 只影响列标题，而在 Firefox 中，树形结构中的单元格只能通过编码数据视图来影响。

代码 sn-ps 如下：

// 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));
};

...

并修改css如下

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

我希望这对将来的其他人有所帮助

【讨论】：