尝试使用javascript(IE8中的innerHTML)添加样式标签 [英] Trying to add style tag using javascript (innerHTML in IE8)

问题描述

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

This doesn't work in IE8. I think it's the innerHTML that causes the problem. How to solve?

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

推荐答案

jQuery

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

jQuery

Since you're already using jQuery, use:

 $('<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！).

Pure JavaScript

If you don't want to use jQuery, you have to first append the <style> element, then use the style.styleSheet.cssText property (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%;} \
";

这篇关于尝试使用javascript(IE8中的innerHTML)添加样式标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！