Tài liệu Creating Applications with Mozilla-Chapter 5. Scripting Mozilla- P3 docx

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

}
</script>
The previous code snippet makes a visible button disappear by setting its
hidden attribute to true. Adding a few more lines, you can toggle the
visibility of the button, also making it appear if it is hidden:
<script>
function disappear( ){
const defaultLabel = "make disappear";
const newLabel = "make reappear";
var button =
document.getElementById('somebutton');
var ctlButton =
document.getElementById('ctlbutton');
if(!button.getAttribute('hidden')) {
button.setAttribute('hidden', true);
ctlButton.setAttribute('label', newLabel);
} else {
button.removeAttribute('hidden');
ctlButton.setAttribute('label', defaultLabel);
}
return;
}
</script>
Another useful application of this functionality is to collapse elements such
as toolbars, boxes, and iframes in your application.
The setAttribute method can also be used to update the element's
class attribute with which style rules are so often associated.
toolbarbutton-1 and button-toolbar are two different classes of
button. You can change a button from a toolbarbutton-1 -- the large
button used in the browser -- to a standard toolbar button using the following

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=" />there.is.only.xul"

title="test"
style="
min-width : 200px;
min-height: 200px;">
<script>
<![CDATA[
function generate( ){
var d = document;
var popup = d.getElementById('menupopup');
var menuitems = new Array('menuitem_1',
'menuitem_2', 'menuitem_3',
'menuitem_4', 'menuitem_5');
var l = menuitems.length;
var newElement;
for(var i=0; i<l; i++)
{
newElement = d.createElement('menuitem');
newElement.setAttribute('id', menuitems[i]);
newElement.setAttribute('label', menuitems[i]);
popup.appendChild(newElement);
}
return true;
}
]]>