В firefox, как изменить цвет текста в ячейке дерева с помощью javascript
ЗАДНИЙ ПЛАН: У меня есть следующий фрагмент 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, как мне установить данные для объекта treeToChange в столбце 1 красным цветом, а данные в столбце синего цвета?
Вы правы, это действительно фрагмент XUL.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Свойство style элемента DOM содержит все объявления CSS для этого элемента. Схема именования немного отличается (camelCaps вместо тире), но в остальном точно такая же.
element.style.color = 'blue';
Вы можете узнать больше о свойстве style в Руководство Mozilla javascript.
Следует отметить, что выбор элемента можно значительно упростить, если использовать фреймворк, например jQuery, который позволяет использовать синтаксис стиля CSS: docs.jquery.com/Selectors
Примечание: это не работает с текстом ячейки дерева, поскольку на самом деле он не является частью элемента DOM.
Это работает с древовидной ячейкой, как и любой другой элемент DOM - developer.mozilla.org/en/XUL/treecell (прочтите унаследованные свойства внизу)
Чтобы установить цвет любого элемента, вы можете использовать:
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;
}
Очевидно, Ной нацелен только на Firefox, учитывая, что фрагмент НЕ HTML, а XUL. Итак, getElementsByClassName уже поддерживается.
Это работает хорошо, однако я понял, что мне нужно быть немного более конкретным, поскольку на странице XUL много деревьев. Как выбрать только то дерево, с которым я работаю? (Также вам нужно переместить последний} обратно в блок кода)
Примечание: это не работает с текстом ячейки дерева, поскольку на самом деле он не является частью элемента DOM.
@Noah: Есть ли в Firefox встроенная функция getElementsByClassName? Если да, то это приятный сюрприз! :)
Оказывается, 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));
};
...
и измените 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%}
Я надеюсь, что это поможет кому-то еще в будущем
Интересно, почему вы думаете, что этот фрагмент можно называть HTML ...