Question

我正在编写一个简单的jQuery插件，我需要在一个样式表标签中插入大约30到40个规则，现在我正在使用的当前代码是由另一个StackOverflow用户编写的。它完成了这项工作，但它为每个规则创建了一个单独的样式标记，我应该如何修改此代码以将其全部放在一个标记中？（我还在研究Javascript，所以我不完全了解源代码。）

(
function( $ )
{
    $.style={
        insertRule:function(selector,rules,contxt)
        {
            var context=contxt||document,stylesheet;



            if(typeof context.styleSheets=='object')
            {
                if(context.styleSheets.length)
                {
                    stylesheet=context.styleSheets[context.styleSheets.length-1];
                }
                if(context.styleSheets.length)
                {
                    if(context.createStyleSheet)
                    {
                        stylesheet=context.createStyleSheet();
                    }
                    else
                    {
                        context.getElementsByTagName('head')[0].appendChild(context.createElement('style'));
                        stylesheet=context.styleSheets[context.styleSheets.length-2];
                    }
                }
                if(stylesheet.addRule)
                {
                    for(var i=0;i<selector.length;++i)
                    {
                        stylesheet.addRule(selector[i],rules);
                    }
                }
                else{
                    stylesheet.insertRule(selector.join(',') + '{' + rules + '}', stylesheet.cssRules.length);  
                }
            }
            console.log(selector + " { " + rules + " }");
        }
    }; 
}
)( jQuery );

Answer 1

试试这些（模式）

   $(function() {
      var styles = "body{background:blue}"
      +"div{color:#fff;}";
      $("<style>", {
          "id" : "styles",
          "text" : styles
      })
      .appendTo("head");
      var rules = ["span{color:red;font-size:24px;}", "em{background:gold;}"];
      $.each(rules, function(index, value){
        $("#styles").append("\n" + value);;
      });
   })

jsfiddle http://jsfiddle.net/guest271314/4MQyY/

多个insertRules到一个CSS样式标记

1 个答案: