CSSStyleSheet.insertRule

この翻訳は不完全です。英語から この記事を翻訳 してください。

概要

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

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

構文

stylesheet.insertRule(rule, index)

引数

  • ruleは、挿入されるルール(セレクタと{から}までの宣言)をあらわすDOMStringです。
  • indexは0以上の整数で、ルールが挿入される位置を示します。

例1

//myStyleの先頭に新しいルールを挿入
myStyle.insertRule("#blanc { color: white }", 0); 

例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);
  }
}

仕様

参照

ドキュメントのタグと貢献者

 このページの貢献者: fscholz, khalid32, jislotz
 最終更新者: khalid32,