mozilla
Your Search Results

    CSSStyleSheet.insertRule

    This translation is incomplete. Please help translate this article from English.

    概要

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

    仕様

    参照

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

    Contributors to this page: khalid32, jislotz, fscholz
    最終更新者: khalid32,