JavaScript动态插入CSS的方法

写组件时有时想把一些组件特性相关的 CSS 样式封装在 JS 里，这样更内聚，改起来方便。JS 动态插入 CSS 两个步骤:创建1、一个 style 对象
2、使用 stylesheet 的 insertRule 或 addRule 方法添加样式

一、查看样式表
先看下 document.styleSheets，随意打开一个页面

其中前三个是通过 link 标签引入的 CSS 文件，第四个是通过 style 标签内联在页面里的 CSS。有如下属性

每一个 cssRule 又有如下属性

其中的 cssText 正是写在 style 的源码。
二、动态插入 CSS
首先，需要创建一个 style 对象，返回其 stylesheet 对象

/* * 创建一个 style， 返回其 stylesheet 对象 * 注意：IE6/7/8中使用 style.stylesheet，其它浏览器 style.sheet */function createStyleSheet（） { var head = document.head || document.getElementsByTagName（"head"）[0]; var style = document.createElement（"style"）; style.type = "text/css"; head.appendChild（style）; return style.sheet ||style.styleSheet;}

添加函数 addCssRule 如下

/* * 动态添加 CSS 样式 * @param selector {string} 选择器 * @param rules {string} CSS样式规则 * @param index {number} 插入规则的位置, 靠后的规则会覆盖靠前的 */function addCssRule（selector, rules, index） { index = index || 0; if （sheet.insertRule） { sheet.insertRule（selector + "{" + rules + "}", index）;} else if （sheet.addRule） { sheet.addRule（selector, rules, index）;}}

需要注意，标准浏览器支持 insertRule， IE低版本则支持 addRule。
完整代码如下

/* * 动态添加 CSS 样式 * @param selector {string} 选择器 * @param rules {string} CSS样式规则 * @param index {number} 插入规则的位置, 靠后的规则会覆盖靠前的 */var addCssRule = function（） { // 创建一个 style， 返回其 stylesheet 对象 // 注意：IE6/7/8中使用 style.stylesheet，其它浏览器 style.sheet function createStyleSheet（） {var head = document.head || document.getElementsByTagName（"head"）[0];var style = document.createElement（"style"）;style.type = "text/css";head.appendChild（style）;return style.sheet ||style.styleSheet; }// 创建 stylesheet 对象 var sheet = createStyleSheet（）;// 返回接口函数 return function（selector, rules, index） {index = index || 0;if （sheet.insertRule） {sheet.insertRule（selector + "{" + rules + "}", index）; } else if （sheet.addRule） {sheet.addRule（selector, rules, index）; } }}（）;

如果只支持移动端或现代浏览器，可以去掉低版本IE判断的代码

/* * 动态添加 CSS 样式 * @param selector {string} 选择器 * @param rules {string} CSS样式规则 * @param index {number} 插入规则的位置, 靠后的规则会覆盖靠前的，默认在后面插入 */var addCssRule = function（） { // 创建一个 style， 返回其 stylesheet 对象 function createStyleSheet（） {var style = document.createElement（"style"）;style.type = "text/css";document.head.appendChild（style）;return style.sheet; }// 创建 stylesheet 对象 var sheet = createStyleSheet（）;// 返回接口函数 return function（selector, rules, index） {index = index || 0;sheet.insertRule（selector + "{" + rules + "}", index）; }}（）;

以上就是JavaScript动态插入CSS的方法，希望对大家的学习有所帮助。