DOM Style Object

To ADD: using element.setAttribute("style", "background-color: blue;") will remove any existing style properties on the element, so it's considered dangerous.

This chapter describes the style objects and the various interfaces they make available for manipulating style rules for HTML and XML documents. The final section, DOM CSS Properties List, is a list of the style properties that can be set or returned with the element.style property.

The basic style object exposes the StyleSheet and the CSSStyleSheet interfaces from the DOM Level 2 Events specification. Those interfaces contain members like insertRule, selectorText, and parentStyleSheet for accessing and manipulating the individual style rules that make up a CSS stylesheet.

To get to the style objects from the document, you can use the document.styleSheets property and access the individual objects by index (e.g., document.styleSheets[0] is the first stylesheet defined for the document, etc.). Though there are various syntaxes for expressing stylesheets for a document, Netscape supports CSS exclusively, so the style object retrieved from this array implements both the StyleSheet and CSSStyleSheet interfaces.


ss = document.styleSheets[1]; ss.cssRules[0].style.backgroundColor="blue";

The list of properties available in the DOM from the style property is given in the DOM CSS Properties List section below.

The element style property can also be used to get the styles on an element. However, this property only returns style attributes that have been set in-line (e.g, <td style="background-color: lightblue"> returns the string "background-color:lightblue," though there may be other styles on the element from a stylesheet). Also, when you set this property on an element, you override and erase any styles that have set elsewhere.

Instead, the getComputedStyle() method on the document.defaultView object returns all styles that have actually been computerd for an element. See Example 6: getComputedStyle in the examples chapter for more information on how to use this method.

DOM Style Object

The style object represents an individual style statement. Unlike the individual rules available from the document.styleSheets array, the style object is accessed from the document or from the elements to which that style is applied. It represents the in-line styles on a particular element.

More important than the two properties surfaced here is the use of the style object in the following sorts of manipulations, where the style object can be used to set individual style properties on an element:

<html> <head> <link rel="StyleSheet" href="example.css"/> <script> function stilo() { document.getElementById("d"). style.color = "orange"; } </script> </head> <body> <div id="d" class="thunder">Thunder</div> <button onclick="stilo()">ss</button> </body> </html>

<html>
 
<head>
 
  <link rel="StyleSheet" href="example.css"/>
 
  <script>
 
     function stilo() {
 
       document.getElementById("d").
            style.color = "orange";
 
     }
 
  </script>
 
</head>
 

 
<body>
 
<div id="d" class="thunder">Thunder</div>
 
<button onclick="stilo()">ss</button>
 
</body>
 
</html>

The media and type of the style may or may not be given. Note that you can also change styles on an element by getting a reference to that element and then using the setAttribute() DOM method to specify both the CSS property and its value.


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 18px, for example, that information is erased when the style attribute is manipulated in this crude way.

Properties


media	Specifies the intended destination medium for style information.
type	Returns the type of style being applied by this statement.