JavaScript 动态生成 CSS 的两种实现方式与 IE 兼容处理

作者：小圆点

时间：2026-10-21

本文介绍利用 JavaScript 动态生成 CSS 代码的两种方法。第一种通过给现有 style 标签添加 ID 并修改 innerHTML；第二种则是动态创建 style 元素并插入 head。重点解决了 IE 浏览器中 styleSheet.cssText 的使用及 stylesheet 数量限制问题，提供了完整的兼容代码示例。

文章目录

JavaScript 动态生成 CSS 代码的两种方法

动态生成 CSS 的兼容性问题

在实际开发中，有时需要通过 JavaScript 动态生成页面 style 标签内的 CSS 样式。最直接的做法是创建一个 style 元素，写入对应的 CSS 代码，最后将其插入到 head 元素中。然而，不同浏览器之间存在兼容性问题需要解决。对于符合 W3C 标准的浏览器，只需将 CSS 代码作为文本节点插入到 style 元素即可；而在 IE 浏览器中，则需要利用 style 元素的 styleSheet.cssText 属性来处理。此外，需注意部分 IE 版本对页面中 style 标签的数量有限制，超出限制可能会报错，这一点在开发时需予以考虑。

方法1：通过 ID 修改现有 Style 标签

方法1：

给 <style id="css"> 标签添加一个 id 名，在 <script> 标签中写


var oCss=document.getElementById("css");

oCss.innerHTML+="#box{width:200px;}";

这样就可以加上样式了。

方法2：动态创建 Style 元素

方法2：

有时需要通过 JavaScript 动态生成页面 style 标签中的 CSS 代码。基本思路是直接创建一个 style 元素，设置其内部的 CSS 代码，最后将其插入到 head 元素中。但这里存在兼容性问题需要解决：在符合 W3C 标准的浏览器中，只需将 CSS 代码作为文本节点插入 style 元素；而在 IE 中，则需利用 style 元素的 styleSheet.cssText 属性来解决。另外，部分 IE 版本对页面中 style 标签的数量有限制，超过限制会报错，这一点必须纳入考量。

代码实现与注释说明

下面直接放上代码，看注释说明。


function addCSS(cssText){
  var style = document.createElement('style'), //创建一个style元素
    head = document.head || document.getElementsByTagName('head')[0]; //获取head元素
  style.type = 'text/css'; //这里必须显示设置style元素的type属性为text/css，否则在ie中不起作用
  if(style.styleSheet){ //IE
    var func = function(){
      try{ //防止IE中stylesheet数量超过限制而发生错误
        style.styleSheet.cssText = cssText;
      }catch(e){

      }
    }
    //如果当前styleSheet还不能用，则放到异步中则行
    if(style.styleSheet.disabled){
      setTimeout(func,10);
    }else{
      func();
    }
  }else{ //w3c
    //w3c浏览器中只要创建文本节点插入到style元素中就行了
    var textNode = document.createTextNode(cssText);
    style.appendChild(textNode);
  }
  head.appendChild(style); //把创建的style元素插入到head中  
}

//使用
addCSS('#demo{ height: 30px; background:#f00;}');