HTMLElement.style

  • Revision slug: DOM/element.style
  • Revision title: element.style
  • Revision id: 70585
  • Created:
  • Creator: miketaylr
  • Is current revision? No
  • Comment It looks like MindTouch prefers an all lowercase "javascript" property for "syntax" in the <pre> function attribute; one or more formatting changes

Revision Content

{{ DomRef() }}

Summary

Returns an object that represents the element's style attribute.

Example

var div = document.getElementById("div1");
div.style.marginTop = ".25in";

Notes

Since the style property has the same (and highest) priority in the CSS cascade as an inline style declaration via the style attribute, it is useful for setting style on one specific element.

However, it is not useful for learning about the element's style in general, since it represents only the CSS declarations set in the element's inline style attribute, not those that come from style rules elsewhere, such as style rules in the {{ HTMLElement("head") }} section, or external style sheets.

To get the values of all CSS properties for an element you should use {{ domxref("window.getComputedStyle()") }} instead.

See the DOM CSS Properties List for a list of the CSS properties that are accessible from the Gecko DOM. There are some additional notes there about the use of the style property to style elements in the DOM.

It is generally better to use the style property than to use elt.setAttribute('style', '...'), since use of the style property will not overwrite other CSS properties that may be specified in the style attribute.

{{ gecko_callout_heading("2.0") }}

Starting in Gecko 2.0 {{ geckoRelease("2.0") }}, you can set SVG properties' values using the same shorthand syntax. For example:

element.style.fill = 'lime';

Except in Opera, styles can not be set by assigning a string to the (read only) style property, as in elt.style = "color: blue;". This is because the style attribute returns a CSSStyleDeclaration object. Instead, you can set style properties like this:

elt.style.color = "blue";  // Directly

var st = elt.style;
st.color = "blue";  // Indirectly

The following code displays the names of all the style properties, the values set explicitly for element elt and the inherited 'computed' values:

var elt = document.getElementById("elementIdHere");
var out = "";
var st = elt.style;
var cs = window.getComputedStyle(elt, null);
for (x in st)
  out += "  " + x + " = '" + st[x] + "' > '" + cs[x] + "'\n";

Specification

DOM Level 2 Style: ElementCSSInlineStyle.style

See also

{{ languages( { "fr": "fr/DOM/element.style", "ja": "ja/DOM/element.style", "pl": "pl/DOM/element.style" } ) }}

Revision Source

<p>{{ DomRef() }}</p>
<h3 id="Summary" name="Summary">Summary</h3>
<p>Returns an object that represents the element's <code>style</code> attribute.</p>
<h3 id="Example" name="Example">Example</h3>
<pre class="brush: js">var div = document.getElementById("div1");
div.style.marginTop = ".25in";
</pre>
<h3 id="Notes" name="Notes">Notes</h3>
<p>Since the <code>style</code> property has the same (and highest) priority in the CSS cascade as an inline style declaration via the <code>style</code> attribute, it is useful for setting style on one specific element.</p>
<p>However, it is not useful for learning about the element's style in general, since it represents only the CSS declarations set in the element's inline <code>style</code> attribute, not those that come from style rules elsewhere, such as style rules in the {{ HTMLElement("head") }} section, or external style sheets.</p>
<p>To get the values of all CSS properties for an element you should use {{ domxref("window.getComputedStyle()") }} instead.</p>
<p>See the <a href="/en/CSS/CSS_Reference" title="en/DOM/CSS">DOM CSS Properties List</a> for a list of the CSS properties that are accessible from the Gecko DOM. There are some additional notes there about the use of the <code>style</code> property to style elements in the DOM.</p>
<p>It is generally better to use the <code>style</code> property than to use <code>elt.setAttribute('style', '...')</code>, since use of the <code>style</code> property will not overwrite other CSS properties that may be specified in the <code>style</code> attribute.</p>
<div class="geckoVersionNote"> <p>{{ gecko_callout_heading("2.0") }}</p> <p>Starting in Gecko 2.0 {{ geckoRelease("2.0") }}, you can set SVG properties' values using the same shorthand syntax. For example:</p> <pre>element.style.fill = 'lime';
</pre>
</div>
<p>Except in Opera, styles can <em>not</em> be set by assigning a string to the (read only) <code>style</code> property, as in <code>elt.style = "color: blue;"</code>. This is because the style attribute returns a <a href="/en/DOM/CSSStyleDeclaration" title="en/DOM/CSSStyleDeclaration"><code>CSSStyleDeclaration</code></a> object. Instead, you can set style properties like this:</p>
<pre class="brush: js">elt.style.color = "blue";  // Directly

var st = elt.style;
st.color = "blue";  // Indirectly
</pre>
<p>The following code displays the names of all the style properties, the values set explicitly for element <code>elt</code> and the inherited 'computed' values:</p>
<pre class="brush: js">var elt = document.getElementById("elementIdHere");
var out = "";
var st = elt.style;
var cs = window.getComputedStyle(elt, null);
for (x in st)
  out += "  " + x + " = '" + st[x] + "' &gt; '" + cs[x] + "'\n";
</pre>
<h3 id="Specification" name="Specification">Specification</h3>
<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-ElementCSSInlineStyle">DOM Level 2 Style: ElementCSSInlineStyle.style</a></p>
<h3 id="See_also">See also</h3>
<ul> <li><a href="/en/DOM/Using_dynamic_styling_information" title="En/DOM/Using dynamic styling information">Using dynamic styling information</a></li>
</ul>
<p>{{ languages( { "fr": "fr/DOM/element.style", "ja": "ja/DOM/element.style", "pl": "pl/DOM/element.style" } ) }}</p>
Revert to this revision