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

Posted 2023-05-07

【中文标题】尝试使用javascript添加样式标签（IE8中的innerHTML）

【英文标题】：Trying to add style tag using javascript (innerHTML in IE8)

【发布时间】：2012-03-04 06:09:36

【问题描述】：

这在 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 );

【问题讨论】：

谁这样使用 style 和 jquery？使用类和\或.css

为什么要用纯JS和jQuery？ jQuery 制作是为了解决这样的跨浏览器问题。

你错过了var 和; var d = document; var someThingStyles = d.createElement('style');

@gdoron：动态生成样式规则非常有用。此外，您可以使用 OP 已经在执行的一个 var 语句定义多个变量。

@gdoron - 什么？ javascript 允许您通过 var 和 , 分配变量列表，因此 var x = 1, y = 2, z = 3; 是一个完全有效的声明。

【参考方案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 ！！）。

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%; \
";

【讨论】：

您可以使用document.head.appendChild 和style.type = ... 代替这个长代码

@vsync document.head 仅从 IE9（和 Firefox 4；当时写答案时，仍然有很多 FF 3.6 用户）开始支持。设置类型是可选的（在 HTML5 中，默认为text/css）。如果你不需要担心与旧IE的兼容性，那么你可以使用var style = document.createElement('style');style.textContent = '... style sheet here ...';document.head.appendChild(style);

仅供任何关注的人注意：在设置 cssText 之前先附加确实很重要！奇怪的球盒，它是需​​要的，但它很重要。

【参考方案2】：

如果您没有使用 jquery，版本 9 之前的 IE 通过将 css 字符串分配给 styleelement.styleSheet.cssText 来写入样式元素。

其他浏览器（包括 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); 

【讨论】：

我遇到的一个警告：在我将元素添加到 DOM 之前，在 IE8 中 elem.styleSheet 对我来说是空的，所以我不得不将

只有在检查 elem.styleSheet 之前明确添加 .setAttribute('type', 'text/css')' 才有效。

【参考方案3】：

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

您可能会对Cs-s-rule 对象的cssText 属性感兴趣 - http://dev.w3.org/csswg/cssom/#dom-cs-s-rule-csstext