views:

1157

answers:

3

BACKGROUND: I have the following XUL fragment

<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

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

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?

+3  A: 

The style property of a DOM element contains all the CSS declarations for that element. The naming scheme is slightly different (camelCaps instead of dashes), but otherwise exactly the same.

 element.style.color = 'blue';

You can read more on the style property in the Mozilla javascript manual.

Eran Galperin
It should be noted that selecting the element can be greatly simplified by using a framework like jQuery which allows you CSS-Style syntax: http://docs.jquery.com/Selectors
Jonathan Sampson
Note: This does not work on tree cell text, since it is not really part of a DOM element
Noah
This does work on a treecell, similarly to any other DOM element - https://developer.mozilla.org/en/XUL/treecell (read inherited properties at the bottom)
Eran Galperin
A: 

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:

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;

}

Lucas Jones
Noah is obviously only targets Firefox considering that the fragment is NOT HTML but XUL. So getElementsByClassName is already supported.
artificialidiot
This works well, however I realized that I needed to be a little more specific, since there are many trees on the XUL page. How do I select only the specific tree I'm working with? (Also, you need to move the final } back into the code block )
Noah
Note: This does not work on tree cell text, since it is not really part of a DOM element
Noah
@Noah: Does Firefox have getElementsByClassName in-built? If so, that's a pleasant surprise! :)
Lucas Jones
A: 
Noah