在firefox中,如何使用javascript更改树状单元格中的文本颜色

时间:2009-01-14 18:53:41

标签: javascript css firefox xul

背景: 我有以下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例程的click事件,如何在第1列红色中设置对象“treeToChange”的数据,在蓝色列中设置数据?

3 个答案:

答案 0 :(得分:3)

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

 element.style.color = 'blue';

您可以在Mozilla javascript manual

中详细了解style属性

答案 1 :(得分:0)

要设置任何元素的颜色,您可以使用:

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");
}
如果向单元格添加单元格类(以避免与文档中的其他树冲突),

将更改数据的颜色

BTW,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;

}

答案 2 :(得分:0)

事实证明,element.style.color只影响列标题,而在firefox中,树结构中的单元格只能通过编码数据视图来影响。

代码段如下:

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

我希望将来可以帮助其他人