本文详细解析JavaScript动态插入CSS的两种主流方式：通过Link标签引入外部样式文件和通过Style标签插入内部样式。重点探讨了在Firefox等标准浏览器与IE系列浏览器中操作cssRules和cssText时的兼容差异，并提供了基于createTextNode的跨浏览器解决方案。此外，文章还分享了一个因ID命名规范导致的IE6/7兼容故障案例，提醒开发者注意私有变量命名规范。
JavaScript动态插入样式的背景与应用场景
在Web前端开发领域，利用JavaScript动态插入样式是一项常用技术，尤其在需要动态调整页面视觉效果或实现主题切换功能的场景中应用频繁。近期遇到的一个具体需求是：当用户在第三方站点点击特定按钮时，需在该站点页面中注入并执行一段脚本，该脚本的核心功能之一便是动态插入CSS样式。
通常而言，通过JavaScript动态添加CSS样式主要包含两种实现路径：第一种是在页面的<head>元素中通过创建<link>标签来引入外部CSS文件；第二种则是在页面中直接创建<style>标签，将样式规则写入其中（此处特指Style元素节点，而非DOM元素的style属性）。
一、页面中引入外部样式：
方案一：通过Link标签引入外部样式
采用<link>标签引入外部样式文件的方法实现相对简单，且目前各大主流浏览器对此均无兼容性障碍，能够稳定运行。
具体实现代码如下：
function includeLinkStyle(url) {
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = url;
document.getElementsByTagName("head")[0].appendChild(link);
}
includeLinkStyle("http://css.jb51.net/home/css/reset.css?v=20101227");方案二：通过Style标签插入内部样式及兼容性问题
然而，在当前负责的项目中，页面原有的样式规则极为精简。若直接引入一个完整的外部样式文件，显然显得冗余且不必要。因此，最终选择了第二种方案，即通过JavaScript在页面中动态创建<style>标签来插入样式。
二、使用<style>标签插入页面样式：
这种动态插入<style>标签的方式在不同浏览器中存在显著的兼容性问题。以Firefox等遵循W3C标准的浏览器为例，无法直接通过styleSheet的cssText属性进行读写设置。在标准浏览器环境下，仅能使用document.styleSheets[0].cssRules[0].cssText逐个读取样式；若尝试直接赋值document.styleSheets[0].cssRules[0].cssText=newcssText，页面样式并不会自动更新。正确的做法是使用document.styleSheets[0].cssRules[0].style.cssText=newcssText。相比之下，IE浏览器的处理方式反而显得更为直观和简便。YUI库中采用了一种巧妙的跨浏览器解决方案：通过style.appendChild(document.createTextNode(styles))，利用createTextNode方法将样式字符串直接添加到<style>标签节点内，从而规避了兼容性问题。
相关实现代码如下：
function includeStyleElement(styles,styleId) {
if (document.getElementById(styleId)) {
return
}
var style = document.createElement("style");
style.id = styleId;
//这里最好给ie设置下面的属性
/*if (isIE()) {
style.type = "text/css";
style.media = "screen"
}*/
(document.getElementsByTagName("head")[0] || document.body).appendChild(style);
if (style.styleSheet) { //for ie
style.styleSheet.cssText = styles;
} else {//for w3c
style.appendChild(document.createTextNode(styles));
}
}
var styles = "#div{background-color: #FF3300; color:#FFFFFF }";
includeStyleElement(styles,"newstyle");通过上述方式，页面中的元素即可直接应用新插入的样式，无论这些元素是预先存在还是通过脚本动态追加生成的。
实战案例：IE浏览器ID命名规范导致的兼容陷阱
关于一个令人头疼的兼容性问题分享：
请观察以下代码片段：
具体代码如下：
var divObj = document.createElement("div");
divObj .id = "__div";
divObj .innerHTML="测试js插入DOM和样式";
document.body.appendChild(divObj );
var styles = "#__div{background-color: #FF3300; color:#FFFFFF }";
includeStyleElement(styles,"newstyle");前文提到，该项目场景是用户在第三方站点点击按钮后注入脚本执行样式插入。为了确保所创建元素的ID在第三方页面中保持唯一性，避免与原有元素冲突，我在ID前添加了双下划线“__”作为私有标识。然而，这引发了一个严重的兼容性问题：在IE6和IE7浏览器中，class和id的命名规范不允许以下划线开头。由于疏忽了这一历史遗留限制，导致样式未能正确应用，排查该问题耗费了两个小时。这一案例得出的教训是：在涉及老旧IE版本的开发中，必须严格遵循ID和Class的命名规范，避免使用特殊字符开头。