尝试使用javascript添加样式标记(IE8中的innerHTML)

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

纯JavaScript

如果你不想使用jQuery,你必须先附加<style>元素,然后使用style.styleSheet.cssText属性(IE-only !!).

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