Chapter 5. Scripting Mozilla- P3

5.3.3. Changing an Element's CSS Style Using JavaScript
Much of what makes the Mozilla UI both flexible and programmable is its
ability to dynamically alter the CSS style rules for elements at runtime. For
example, if you have a button, you can toggle its visibility by using a simple
combination of JavaScript and CSS. Given a basic set of buttons like this:
<button id="somebutton" class="testButton"
label="foo" />
<spacer flex="1" />
<button id="ctlbutton"
class="testButton"
label="make disappear"
oncommand="disappear( );" />
as well as a stylesheet import statement at the top of the XUL like this:
<?xml-stylesheet href="test.css" type="text/css"?>
and a simple CSS file in your chrome/xfly/content directory called
test.css that contains the following style rule:
#somebutton[hidden="true"]{ display: none; }
.testButton{
border : 1px outset #cccccc;
background-color : #cccccc;
padding : 4px;
margin : 50px;
}
You can call setAttribute in your script to hide the button at runtime.
<script>
function disappear( ){
return
document.getElementById('somebutton').setAttribute(
'hidden', true);

DOM code:
// get the Back button in the browser
b1 = document.getElementById("back-button");\
b1.setAttribute("class", "button-toolbar");
This dynamically demotes the Back button to an ordinary toolbar button.
Code such as this assumes, of course, that you know the classes that are used
to style the various widgets in the interface.
You can also set the style attribute directly using the DOM:
el = document.getElementById("some-element");
el.setAttribute("style", "background-
color:darkblue;");
Be aware, however, that when you set the style attribute in this way, you
are overwriting whatever style properties may already have been defined in
the style attribute. If the document referenced in the snippet above by the
ID some-element has a style attribute in which the font size is set to
18pc, for example, that information is erased when the style attribute is
manipulated in this way.
5.3.4. Creating Elements Dynamically
Using the createElement method in XUL lets you accomplish things
similar to document.write in HTML, with which you can create new
pages and parts of a web page. In Example 5-9
, createElement is used
to generate a menu dynamically.
Example 5-9. Dynamic menu generation
<?xml version="1.0"?>
<?xml-stylesheet href="test.css" type="text/css"?>
<!DOCTYPE window>
<window id="test-win"

xmlns="http://www.mozilla.org/keymaster/gatekeeper/