В Firefox, как изменить цвет текста в древовидной ячейке с помощью JavaScript - PullRequest
Новая
       11

В Firefox, как изменить цвет текста в древовидной ячейке с помощью JavaScript

0 голосов
/ 14 января 2009

ФОН: У меня есть следующий фрагмент 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, в ответ на событие click, которое вызывает подпрограмму javascript, как мне установить данные для объекта «treeToChange» в столбце 1 красным и данные в столбце синего цвета?

Ответы [ 3 ]

3 голосов
/ 14 января 2009

Свойство style элемента DOM содержит все объявления CSS для этого элемента. Схема именования немного отличается (camelCaps вместо черточек), но в остальном точно такая же. 

 element.style.color = 'blue';

Подробнее о свойстве стиля вы можете прочитать в руководстве по JavaScript для Mozilla .

0 голосов
/ 17 января 2009

Оказывается, что element.style.color влияет только на заголовки столбцов, и что в Firefox на ячейки в древовидной структуре может влиять только кодирование представления данных.

следующие фрагменты кода:

</p> <pre><code>// 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%}

Я надеюсь, что это поможет кому-то еще в будущем

0 голосов
/ 14 января 2009

Чтобы установить цвет любого элемента, вы можете использовать: 

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

изменит цвет данных, если вы добавите класс ячеек в ячейки (чтобы избежать конфликта с другими деревьями в документе)

Кстати, здесь - это 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;

}

...