[英]In firefox, how to change color of text in a treecell using javascript
BACKGROUND: I have the following XUL fragment 背景:我有以下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>
and the following css fragment 和以下css片段
tree { font-size: 120%; color: green;}
This causes my column data to be displayed in green text. 这使我的列数据以绿色文本显示。
I have many such tree objects on the XUL page 我在XUL页面上有很多这样的树对象
QUESTION: In firefox, in response to a click event, which calls a javascript routine, how do I set the data for the object "treeToChange" in column 1 red and the data in column blue? 问题:在firefox中,响应单击事件,该事件调用了javascript例程,如何在第1列的红色中设置对象“ treeToChange”的数据,在蓝色的列中设置数据?
The style property of a DOM element contains all the CSS declarations for that element. DOM元素的style属性包含该元素的所有CSS声明。 The naming scheme is slightly different (camelCaps instead of dashes), but otherwise exactly the same.
命名方案略有不同(camelCaps而不是破折号),但其他方面完全相同。
element.style.color = 'blue';
You can read more on the style property in the Mozilla javascript manual . 您可以在Mozilla javascript手册中阅读有关style属性的更多信息。
To set the colour of any element, you can use: 要设置任何元素的颜色,可以使用:
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");
}
will change the colour of the data, if you add a cell class to the cells (to avoid conflicting with other trees in the doc) 如果将单元格类添加到单元格中,将更改数据的颜色(以避免与文档中的其他树冲突)
BTW, here is document.getElementsByClassName: 顺便说一句, 这是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;
} }
It turns out that the element.style.color only effects the column headings, and that within firefox, the cells in a tree structure can only be affected by coding the dataview. 事实证明element.style.color仅影响列标题,而在firefox中,只有通过对dataview进行编码才能影响树结构中的单元格。
code snippets follow: 代码片段如下:
// 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%}
I hope this helps someone else in the future 我希望这对以后的人有帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.