HTMLStyleElement

  • Revision slug: DOM/HTMLStyleElement
  • Revision title: HTMLStyleElement
  • Revision id: 6697
  • Created:
  • Creator: Jabez
  • Is current revision? No
  • Comment /* Material to be moved to other pages */

Revision Content

{{template.DomRef()}}

Notes

See the following pages for information on some of the objects used to manipulate specified CSS properties using the DOM:

Material to be moved to other pages

The basic style object exposes the StyleSheet and the CSSStyleSheet interfaces from the DOM Level 2 Style 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{{mediawiki.external(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.

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

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

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 been set elsewhere.

Instead, the getComputedStyle() method on the document.defaultView object returns all styles that have actually been computed 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 collection, 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 noted here is the use of the style object to set individual style properties on an element:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>style Property Example</title>
  <link rel="StyleSheet" href="example.css" type="text/css">
  <script type="text/javascript">
    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 style of an element by getting a reference to it and then use its setAttribute method to specify the CSS property and its value.

var el = document.getElementById("some-element");
el.setAttribute("style", "background-color:darkblue;");

Be aware, however, that setAttribute will remove all other style properties that may already have been defined in the element's style object. If the some-element element above had an in–line style attribute of say style="font-size: 18px", that value would have been removed by the use of setAttribute.

Properties
style.media 
Specifies the intended destination medium for style information.
style.type 
Returns the type of style being applied by this statement.
{{ wiki.languages( { "fr": "fr/DOM/style" } ) }}

Revision Source

<p>
{{template.DomRef()}}
</p>
<h3 name="Notes"> Notes </h3>
<p>See the following pages for information on some of the objects used to manipulate specified CSS properties using the DOM:
</p>
<ul><li> <a href="en/DOM/element.style">DOM element.style Object</a>
</li><li> <a href="en/DOM/stylesheet">DOM stylesheet Object</a>
</li><li> <a href="en/DOM/cssRule">DOM cssRule Object</a>
</li><li> <a href="en/DOM/CSS">DOM CSS Properties List</a>
</li></ul>
<h3 name="Material_to_be_moved_to_other_pages"> Material to be moved to other pages </h3>
<p>The basic <code>style</code> object exposes the <code>StyleSheet</code> and the <code>CSSStyleSheet</code> interfaces from the <i>DOM Level 2 Style</i> specification. Those interfaces contain members like <code>insertRule</code>, <code>selectorText</code>, and <code>parentStyleSheet</code> for accessing and manipulating the individual style rules that make up a CSS stylesheet.
</p><p>To get to the <code>style</code> objects from the <code>document</code>, you can use the <code>document.styleSheets</code> property and access the individual objects by index (e.g., <code>document.styleSheets{{mediawiki.external(0)}}</code> 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 <code>style</code> object retrieved from this array implements both the StyleSheet and CSSStyleSheet interfaces.
</p>
<pre class="eval">var ss = document.styleSheets[1];
ss.cssRules[0].style.backgroundColor="blue";
</pre>
<p>The list of properties available in the DOM from the style property is given on the <a href="en/DOM/CSS">DOM CSS Properties List</a> page.
</p><p>The element <a href="en/DOM/style">style</a> property can also be used to get the styles on an element. However, this property only returns style attributes that have been set <i>in-line</i> (e.g, <code>&lt;td style="background-color: lightblue"&gt;</code> 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 been set elsewhere.
</p><p>Instead, the <code>getComputedStyle()</code> method on the <code>document.defaultView</code> object returns all styles that have actually been computed for an element. See <a href="en/Gecko_DOM_Reference/Examples#Example_6:_getComputedStyle">Example 6: getComputedStyle</a> in the examples chapter for more information on how to use this method.
</p>
<h4 name="DOM_Style_Object">DOM Style Object</h4>
<p>The <code>style</code> object represents an individual style statement. Unlike the individual rules available from the <code><a href="en/DOM/document.styleSheets">document.styleSheets</a></code> collection, the style object is accessed from the <code>document</code> or from the elements to which that style is applied. It represents the <i>in-line</i> styles on a particular element.
</p><p>More important than the two properties noted here is the use of the <code>style</code> object to set individual style properties on an element:
</p>
<pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;title&gt;style Property Example&lt;/title&gt;
  &lt;link rel="StyleSheet" href="example.css" type="text/css"&gt;
  &lt;script type="text/javascript"&gt;
    function stilo()
    {
      document.getElementById("d").style.color = "orange";
    }
  &lt;/script&gt;
 &lt;/head&gt;

 &lt;body&gt;
  &lt;div id="d" class="thunder"&gt;Thunder&lt;/div&gt;
  &lt;button onclick="stilo()"&gt;ss&lt;/button&gt;
 &lt;/body&gt;
&lt;/html&gt;
</pre>
<p>The <b>media</b> and <b>type</b> of the style may or may not be given. Note that you can also change style of an element by getting a reference to it and then use its <code><a href="en/DOM/element.setAttribute">setAttribute</a></code> method to specify the CSS property and its value.
</p>
<pre>var el = document.getElementById("some-element");
el.setAttribute("style", "background-color:darkblue;");
</pre>
<p>Be aware, however, that <code>setAttribute</code> will remove all other style properties that may already have been defined in the element's style object. If the <var>some-element</var> element above had an in–line style attribute of say <code>style="font-size: 18px"</code>, that value would have been removed by the use of <code>setAttribute</code>.
</p>
<h5 name="Properties">Properties</h5>
<dl><dt> <a href="en/DOM/style.media">style.media</a> </dt><dd> Specifies the intended destination medium for style information.
</dd><dt> <a href="en/DOM/style.type">style.type</a> </dt><dd> Returns the type of style being applied by this statement.
</dd></dl>
{{ wiki.languages( { "fr": "fr/DOM/style" } ) }}
Revert to this revision