0

背景: 次の 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 の赤に設定し、列のデータを青に設定するにはどうすればよいですか?

4

3 に答える 3

3

DOM 要素の style プロパティには、その要素のすべての CSS 宣言が含まれています。命名規則は少し異なります (ダッシュではなくキャメルキャップ) が、それ以外はまったく同じです。

 element.style.color = 'blue';

スタイル プロパティの詳細については、Mozilla javascript マニュアルを参照してください。

于 2009-01-14T18:56:50.337 に答える
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%}

これが将来他の誰かに役立つことを願っています

于 2009-01-17T15:34:48.397 に答える
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");
}

セル クラスをセルに追加すると、データの色が変わります (ドキュメント内の他のツリーとの競合を避けるため)。

ところで、ここに 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;

}

于 2009-01-14T19:00:33.323 に答える