|
Layers |
Document Object Model |
DIV Tags |
Non-Standard Elements |
Style Sheets
Dynamically affecting a page's style requires DOM Level 2 Cascading Style Sheets interface calls. Using the getElementById, getElementByTagName, or getElementByTagNameNS methods provided by the DOM, developers can access elements, and by using the insertRule method, developers can add to the style sheet within the head of a page. document.styleSheets through Internet Explorer and document.tags, document.classes, and document.contexual() through Netscape 4 are unsupported in the Netscape 6 browser. For example:
var nameCSS = "test";
function addCSS (varName, varTag, varStyle) {
var x = document.getElementById(varName);
var y = y.length;
x.insertRule (varTag + " { " + varStyle + " } ", y);
}
|
Dynamically changing styles in a document can be done with the
element.style property. After determining the object reference using the
getElementById, getElementTagName, or getElementTagNameNS methods, that
reference can be manipulated via .style. In the example below, P tags are
given a left border of 20 px.
var x = document.getElementById("P");
x.style.left = "20 px";
|
The following table demonstrates some standard usages of the element.style property. The unsupported Netscape 4 and Internet Explorer methods of changing styles have been included to demonstrate where to make the appropriate changes.
Netscape Gecko | Netscape 4.x | Internet Explorer 4/5 |
|---|
DOM level 2 element.style.visibility = value;
DOM level 2 provides for the assignment of new values to the CSS
visibility property using the element.style object reference. You can get the element to which that style corresponds by using the DOM's getElementById or one of the other methods described in the DOM access
section above. |
element.visibility = value; |
element.style.visibility = value; |
DOM level 2: parseInt (element.style.left) |
element.left |
element.style.pixelLeft |
DOM level 2: parseInt (element.style.top) |
element.top |
element.style.pixelTop |
DOM level 2: element.style.left = value + "px";
DOM level 2: element.style.top = value + "px"; |
element.moveTo(x, y); |
element.style.pixelLeft = x; element.style.pixelTop = y; |
According to the rough draft of the W3C DOM2 standard, a tag's style is the static style as set by the STYLE attribute only. It does not include any inherited styles, as from parent elements or external style sheets. Using JavaScript to access these styles, then, requires that developers either place these styles within the tag's STYLE attribute or to use no static styles at all but rather add them dynamically through the DOM with JavaScript.
Finally, also within the new W3C DOM2 standard, values returned for element.style.left or element.style.top will include the unit of measurement, in this case pixels or "px". This is different than Netscape 4 or Internet Explorer 4/5, which returned only the number.
For more informaiton, please refer to:
Netscape DevEdge CSS Developer Central
|
