CSSStyleSheet.insertRule()

  • Revision slug: Web/API/CSSStyleSheet.insertRule
  • Revision title: CSSStyleSheet.insertRule
  • Revision id: 506299
  • Created:
  • Creator: jislotz
  • Is current revision? No
  • Comment

Revision Content

{{DomRef}}

概要

CSSStyleSheet.insertRule() メソッドは、新しいスタイルのルールを、現在あるスタイルシートの中に挿入します。

CSSのルールセット(規則集合)に対しては、このメソッドの第1引数は、セレクタとスタイル宣言の両方を含みます。 @規則に対しては、このメソッドの第1引数には、@識別子と規則内容の両方を指定します。引数の{{domxref("DOMString")}}に2つ以上のルールが与えられた場合、エラーコードがSYNTAX_ERRの{{domxref("DOMException")}}が投げられます。

Syntax

stylesheet.insertRule(rule, index)

Parameters

  • rule is a {{domxref("DOMString")}} containing the rule to be inserted (selector and declaration).
  • index is a unsigned int representing the position to be inserted.

Examples

Example 1

// push a new rule onto the top of my stylesheet
myStyle.insertRule("#blanc { color: white }", 0); 

Example 2

/**
 * Add a stylesheet rule to the document (may be better practice, however,
 *  to dynamically change classes, so style information can be kept in
 *  genuine styesheets (and avoid adding extra elements to the DOM))
 *
 * @param {Array} rules Accepts an array of JSON-encoded declarations
 * @example
addStylesheetRules({
  'h2': {
    'color': 'red',
    'background-color': ['green', true] // 'true' for !important rules 
  }, 
  '.myClass': {
    'background-color': 'yellow'
  }
});
 */
function addStylesheetRules (rules) {
  var styleEl = document.createElement('style');
  document.head.appendChild(styleEl);
  // Apparently some version of Safari needs the following line? I dunno.
  styleEl.appendChild(document.createTextNode(''));
  var s = styleEl.sheet;
  for(var selector in rules) {
    var props = rules[selector];
    var propStr = '';
    for(var propName in props) {
      var propVal = props[propName];
      var propImportant = '';
      if(propVal[1] === true) {
        // propVal is an array of value/important, rather than a string.
        propVal = propVal[0];
        propImportant = ' !important'
      }
      propStr += propName + ':' + propVal + propImportant + ';\n';
    }
    s.insertRule(selector + '{' + propStr + '}', s.cssRules.length);
  }
}

Specification

See also

Revision Source

<div>
 {{DomRef}}</div>
<h2 id="Summary" name="Summary">概要</h2>
<p><code><strong>CSSStyleSheet.insertRule()</strong></code>&nbsp;メソッドは、新しいスタイルのルールを、現在あるスタイルシートの中に挿入します。</p>
<p>CSSのルールセット(規則集合)に対しては、このメソッドの第1引数は、セレクタとスタイル宣言の両方を含みます。&nbsp;@規則に対しては、このメソッドの第1引数には、@識別子と規則内容の両方を指定します。引数の<span style="line-height: 1.5;">{{domxref("DOMString")}}に2つ以上のルールが与えられた場合、エラーコードが</span><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">SYNTAX_ERRの</span><span style="line-height: 1.5;">{{domxref("DOMException")}}が投げられます。</span></p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="syntaxbox">
<var>stylesheet</var>.insertRule(<var>rule</var>, <var>index</var>)</pre>
<h3 id="Parameters" name="Parameters">Parameters</h3>
<ul>
 <li><code>rule</code> is a {{domxref("DOMString")}} containing the rule to be inserted (selector and declaration).</li>
 <li><code>index</code> is a <code>unsigned int</code> representing the position to be inserted.</li>
</ul>
<h2 id="Examples" name="Examples">Examples</h2>
<h3 id="Example_1" name="Example_1">Example 1</h3>
<pre class="brush: js">
// push a new rule onto the top of my stylesheet
myStyle.insertRule("#blanc { color: white }", 0); 
</pre>
<h3 id="Example_2" name="Example_2">Example 2</h3>
<pre class="brush: js">
/**
 * Add a stylesheet rule to the document (may be better practice, however,
 *  to dynamically change classes, so style information can be kept in
 *  genuine styesheets (and avoid adding extra elements to the DOM))
 *
 * @param {Array} rules Accepts an array of JSON-encoded declarations
 * @example
addStylesheetRules({
  'h2': {
    'color': 'red',
    'background-color': ['green', true] // 'true' for !important rules 
  }, 
  '.myClass': {
    'background-color': 'yellow'
  }
});
 */
function addStylesheetRules (rules) {
  var styleEl = document.createElement('style');
  document.head.appendChild(styleEl);
  // Apparently some version of Safari needs the following line? I dunno.
  styleEl.appendChild(document.createTextNode(''));
  var s = styleEl.sheet;
  for(var selector in rules) {
    var props = rules[selector];
    var propStr = '';
    for(var propName in props) {
      var propVal = props[propName];
      var propImportant = '';
      if(propVal[1] === true) {
        // propVal is an array of value/important, rather than a string.
        propVal = propVal[0];
        propImportant = ' !important'
      }
      propStr += propName + ':' + propVal + propImportant + ';\n';
    }
    s.insertRule(selector + '{' + propStr + '}', s.cssRules.length);
  }
}</pre>
<h2 id="Specification" name="Specification">Specification</h2>
<ul>
 <li><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-CSSStyleSheet-insertRule">insertRule </a></li>
</ul>
<h2 id="See_also">See also</h2>
<ul>
 <li><a href="/en-US/docs/Web/API/CSSStyleSheet/deleteRule"><code>deleteRule</code></a></li>
</ul>
Revert to this revision