JavaScript动态插入CSS的方法_Javascript教程-查字典教程网
JavaScript动态插入CSS的方法
JavaScript动态插入CSS的方法
发布时间:2016-12-30 来源:查字典编辑
摘要:写组件时有时想把一些组件特性相关的CSS样式封装在JS里,这样更内聚,改起来方便。JS动态插入CSS两个步骤:创建1、一个style对象2、...

写组件时有时想把一些组件特性相关的 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的方法,希望对大家的学习有所帮助。

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类