mozilla

Revision 469429 of CSSStyleSheet

  • Revision slug: Web/API/CSSStyleSheet
  • Revision title: CSSStyleSheet
  • Revision id: 469429
  • Created:
  • Creator: kscarfone
  • Is current revision? No
  • Comment Updated tags

Revision Content

{{ CSSOMRef() }}

An object implementing the CSSStyleSheet interface represents a single CSS style sheet.

A CSS style sheet consists of CSS rules, each of which can be manipulated through an object that corresponds to that rule and that implements the {{ domxref("CSSStyleRule") }} interface, which in turn implements {{ domxref("CSSRule") }}. The CSSStyleSheet itself lets you examine and modify its corresponding style sheet, including its list of rules.

In practice, every CSSStyleSheet also implements the more generic {{ domxref("StyleSheet") }} interface. A list of CSSStyleSheet-implementing objects corresponding to the style sheets for a given document can be reached by the document.styleSheets property, if the document is styled by an external CSS style sheet or an inline style element.

Properties

cssRules
Returns a {{ domxref("CSSRuleList") }} of the CSS rules in the style sheet.
ownerRule
If this style sheet is imported into the document using an {{ cssxref("@import") }} rule, the ownerRule property will return that {{ domxref("CSSImportRule") }}, otherwise it returns null.

Methods

deleteRule
Deletes a rule from the style sheet.
insertRule
Inserts a new style rule into the current style sheet.

Notes

In some browsers, if a stylesheet is loaded from a different domain, calling cssRules result in SecurityError.

Specification

DOM Level 2 CSS: CSSStyleSheet interface

See also

  • {{ domxref("StyleSheet") }}

Revision Source

<p>{{ CSSOMRef() }}</p>
<p>An object implementing the <code>CSSStyleSheet</code> interface represents a single <a href="/en/CSS" title="en/CSS">CSS</a> style sheet.</p>
<p>A CSS style sheet consists of CSS rules, each of which can be manipulated through an object that corresponds to that rule and that implements the {{ domxref("CSSStyleRule") }} interface, which in turn implements {{ domxref("CSSRule") }}. The <code>CSSStyleSheet</code> itself lets you examine and modify its corresponding style sheet, including its list of rules.</p>
<p>In practice, every <code>CSSStyleSheet</code> also implements the more generic {{ domxref("StyleSheet") }} interface. A list of <code>CSSStyleSheet</code>-implementing objects corresponding to the style sheets for a given document can be reached by the <code><a href="/en-US/docs/DOM/document.styleSheets" title="en/DOM/document.styleSheets">document.styleSheets</a></code> property, if the document is styled by an external CSS style sheet or an inline <code><a href="/en/HTML/Element/style" title="en/HTML/element/style">style</a></code> element.</p>
<h2 id="Properties" name="Properties">Properties</h2>
<dl>
  <dt id="cssRules">
    <code>cssRules</code></dt>
  <dd>
    Returns a {{ domxref("CSSRuleList") }} of the CSS rules in the style sheet.</dd>
  <dt id="ownerRule">
    <code>ownerRule</code></dt>
  <dd>
    If this style sheet is imported into the document using an {{ cssxref("@import") }} rule, the <code>ownerRule</code> property will return that {{ domxref("CSSImportRule") }}, otherwise it returns <code>null</code>.</dd>
</dl>
<h2 id="Methods" name="Methods">Methods</h2>
<dl>
  <dt id="deleteRule">
    <code><a href="/en/DOM/CSSStyleSheet/deleteRule" title="en/DOM/CSSStyleSheet/deleteRule">deleteRule</a></code></dt>
  <dd>
    Deletes a rule from the style sheet.</dd>
  <dt id="insertRule">
    <code><a href="/en/DOM/CSSStyleSheet/insertRule" title="en/DOM/CSSStyleSheet/insertRule">insertRule</a></code></dt>
  <dd>
    Inserts a new style rule into the current style sheet.</dd>
</dl>
<h2 id="Specification" name="Specification">Notes</h2>
<p>In some browsers, if a stylesheet is loaded from a different domain, calling&nbsp;<code>cssRules </code>result in <code>SecurityError.</code></p>
<h2 id="Specification" name="Specification">Specification</h2>
<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleSheet">DOM Level 2 CSS: <code>CSSStyleSheet</code> interface</a></p>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
  <li>{{ domxref("StyleSheet") }}</li>
</ul>
Revert to this revision