Question

这在IE8中不起作用。我认为是导致问题的innerHTML。怎么解决？

// jQuery plugin
(function( $ ){

    $.fn.someThing = function( options ) {  

        var d = document,
            someThingStyles = d.createElement('style');

        someThingStyles.setAttribute('type', 'text/css');
        someThingStyles.innerHTML = " \
        .some_class {overflow:hidden} \
        .some_class > div {width:100%;height:100%;} \
        ";
        d.getElementsByTagName('head')[0].appendChild(someThingStyles);

        });

    };

})( jQuery );

Answer 1

的jQuery

由于您已经在使用jQuery，请使用：

 $('<style type="text/css">' + 
   '.some_class {overflow:hidden}' +
    '.some_class > div {width:100%;height:100%;}' +
    '</style>').appendTo('head');

Pure JavaScript

如果您不想使用jQuery，则必须首先附加<style>元素，然后使用style.styleSheet.cssText属性（仅限IE）。

var d = document,
    someThingStyles = d.createElement('style');
d.getElementsByTagName('head')[0].appendChild(someThingStyles);
someThingStyles.setAttribute('type', 'text/css');

someThingStyles.styleSheet.cssText = " \
.some_class {overflow:hidden} \
.some_class > div {width:100%;height:100%;} \
";

Answer 2

如果您使用jquery，则版本9之前的IE会通过为styleelement.styleSheet.cssText指定css字符串来写入样式元素。

其他浏览器（包括IE9 +）允许您直接将文本节点附加到元素。

function addStyleElement(css){
  var elem=document.createElement('style');
  if(elem.styleSheet && !elem.sheet)elem.styleSheet.cssText=css;
  else elem.appendChild(document.createTextNode(css));
  document.getElementsByTagName('head')[0].appendChild(elem); 
}

Answer 3

您应该查看CSSOM（CSS对象模型）规范 - http://dev.w3.org/csswg/cssom/

您可能会对cssText个对象的CSSRule属性感兴趣 - http://dev.w3.org/csswg/cssom/#dom-cssrule-csstext

尝试使用javascript添加样式标记（IE8中的innerHTML）

3 个答案:

的jQuery

Pure JavaScript