Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 484747 of CSSStyleDeclaration

  • Revision slug: Web/API/CSSStyleDeclaration
  • Revision title: CSSStyleDeclaration
  • Revision id: 484747
  • Created:
  • Creator: Markus Prokott
  • Is current revision? No
  • Comment linkfix

Revision Content

{{ CSSOMRef() }}

Summary

A CSSStyleDeclaration is an interface to the declaration block returned by the style property of a cssRule in a stylesheet, when the rule is a CSSStyleRule.

CSSStyleDeclaration is also a read-only interface to the result of getComputedStyle.

Attributes

cssText
Textual representation of the declaration block. Setting this attribute changes the style.

length
The number of properties. See the item method below.

parentRule
The containing cssRule.

Methods

getPropertyPriority(propertyName)
Returns the optional priority, "important".
Example: priString= styleObj.getPropertyPriority('color')

getPropertyValue(propertyName)
Returns the property value.
Example: valString= styleObj.getPropertyValue('color')

item(index)
Returns a property name.
Example: nameString= styleObj.item(0)
Alternative: nameString= styleObj[0]

removeProperty(propertyName)
Returns the value deleted.
Example: valString= styleObj.removeProperty('color')

setProperty(propertyName, value, priority)
No return.
Example: styleObj.setProperty('color', 'red', 'important')

getPropertyCSSValue(propertyName)
Only supported via getComputedStyle.
Returns an {{ domxref("ROCSSPrimitiveValue") }} in Firefox ({{ domxref("CSSPrimitiveValue") }}, in others, which implements CSSValue), or null for Shorthand properties.
Example: cssString= window.getComputedStyle(elem, null).getPropertyCSSValue('color').cssText;
Note: Gecko 1.9 returns null unless using getComputedStyle().
Note: This method may be deprecated by the W3C , and it is not present in the latest CSSOM draft. It is not supported by IE and even though the function exists in Opera, calling it throws a {{ domxref("DOMException") }} NOT_SUPPORTED_ERR.

Example

var styleObj= document.styleSheets[0].cssRules[0].style;
alert(styleObj.cssText);
for (var i = styleObj.length-1; i >= 0; i--) {
   var nameString = styleObj[i];
   styleObj.removeProperty(nameString);
}
alert(styleObj.cssText);

Notes

The declaration block is that part of the style rule that appears within the braces and that actually provides the style definitions (for the selector, the part that comes before the braces).

See also:

Specification

DOM Level 2 CSS: CSSStyleDeclaration

Revision Source

<p>{{ CSSOMRef() }}</p>
<h3 id="Summary" name="Summary">Summary</h3>
<p>A CSSStyleDeclaration is an interface to the <a class="external" href="https://www.w3.org/TR/1998/REC-CSS2-19980512/syndata.html#block">declaration block</a> returned by the <code><a href="/en/DOM/cssRule.style" rel="internal" title="en/DOM/cssRule.style">style</a></code> property of a <code><a href="/en/DOM/cssRule" rel="internal" title="en/DOM/cssRule">cssRule</a></code> in a <a href="/en/DOM/stylesheet" rel="internal" title="en/DOM/stylesheet">stylesheet</a>, when the&nbsp;rule is a <a href="/en/DOM/cssRule#CSSStyleRule" title="en/DOM/cssRule#CSSStyleRule">CSSStyleRule</a>.</p>
<p>CSSStyleDeclaration is also a <strong>read-only </strong>interface to the result of <a href="/en/DOM/window.getComputedStyle" title="en/DOM/window.getComputedStyle">getComputedStyle</a>.</p>
<h3 id="Syntax" name="Syntax">Attributes</h3>
<p><strong>cssText</strong><br />
 Textual representation of the declaration block. Setting this attribute changes the style.</p>
<p><strong>length</strong><br />
 The number of properties. See the <strong>item</strong> method below.</p>
<p><strong>parentRule</strong><br />
 The containing <code><a href="/en/DOM/cssRule" rel="internal" title="en/DOM/cssRule">cssRule</a>.</code></p>
<h3 id="Syntax" name="Syntax">Methods</h3>
<p><strong>getPropertyPriority</strong><strong>(<em>propertyName</em>)</strong><br />
 Returns the optional priority, "important".<br />
 Example: <em>priString</em>= <em>styleObj</em>.getPropertyPriority('color')</p>
<p><strong>getPropertyValue(<em>propertyName</em>)</strong><br />
 Returns the property value.<br />
 Example: <em>valString</em>= <em>styleObj</em>.getPropertyValue('color')</p>
<p><strong>item(<em>index</em></strong><strong>)</strong><br />
 Returns a property name.<br />
 Example: <em>nameString</em>= <em>styleObj</em>.item(0)<br />
 Alternative: <em>nameString</em>= <em>styleObj</em>[0]</p>
<p><strong>removeProperty(<em>propertyName</em>)</strong><br />
 Returns the value deleted.<br />
 Example: <em>valString</em>= <em>styleObj</em>.removeProperty('color')</p>
<p><strong>setProperty(<em>propertyName</em>, <em>value</em>, <em>priority</em>)</strong><br />
 No return.<br />
 Example: <em>styleObj</em>.setProperty('color', 'red', 'important')</p>
<p><strong>getPropertyCSSValue(<em>propertyName</em>)</strong><br />
 <span style="color: rgb(255, 0, 0);">Only supported via getComputedStyle.</span><br />
 Returns an {{ domxref("ROCSSPrimitiveValue") }} in Firefox ({{ domxref("CSSPrimitiveValue") }}, in others, which implements <a class="external" href="https://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSValue" title="https://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSValue">CSSValue</a>), or <code>null</code> for <a href="/en/CSS/Shorthand_properties" title="en/Guide to Shorthand CSS">Shorthand properties</a>.<br />
 Example: <em>cssString</em>= window.getComputedStyle(<em>elem</em>, <code>null</code>).getPropertyCSSValue('color').cssText;<br />
 Note: Gecko 1.9 returns null unless using <a href="/en/DOM/window.getComputedStyle" title="en/DOM/window.getComputedStyle">getComputedStyle()</a>.<br />
 Note: This method may be <a class="external" href="https://lists.w3.org/Archives/Public/www-style/2003Oct/0347.html" title="https://lists.w3.org/Archives/Public/www-style/2003Oct/0347.html">deprecated by the W3C</a> , and it is not present in the latest <a href="https://dev.w3.org/csswg/cssom/#cssstyledeclaration" title="https://dev.w3.org/csswg/cssom/#cssstyledeclaration">CSSOM draft</a>. It is not supported by IE and even though the function exists in Opera, calling it throws a {{ domxref("DOMException") }} NOT_SUPPORTED_ERR.</p>
<h3 id="Example" name="Example">Example</h3>
<pre class="brush: js">
var styleObj= document.styleSheets[0].cssRules[0].style;
alert(styleObj.cssText);
for (var i = styleObj.length-1; i &gt;= 0; i--) {
   var nameString = styleObj[i];
   styleObj.removeProperty(nameString);
}
alert(styleObj.cssText);</pre>
<h3 id="Notes" name="Notes">Notes</h3>
<p>The declaration block is that part of the style rule that appears within the braces and that actually provides the style definitions (for the selector, the part that comes before the braces).</p>
<h3 id="See_also.3A">See also:</h3>
<ul>
 <li><a href="/en-US/docs/Web/CSS/CSS_Properties_Reference" title="/en-US/docs/Web/CSS/CSS_Properties_Reference">DOM CSS Properties</a></li>
</ul>
<h3 id="Specification" name="Specification">Specification</h3>
<p><a class="external" href="https://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration" title="https://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration">DOM Level 2 CSS: CSSStyleDeclaration</a></p>
Revert to this revision