JavaScript动态插入CSS的方法


Posted in Javascript onDecember 10, 2015

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

一、查看样式表

先看下 document.styleSheets,随意打开一个页面

JavaScript动态插入CSS的方法

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

JavaScript动态插入CSS的方法

 每一个 cssRule 又有如下属性

JavaScript动态插入CSS的方法

其中的 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 相关文章推荐
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
Feb 23 Javascript
JsRender for object语法简介
Oct 31 Javascript
js+css实现导航效果实例
Feb 10 Javascript
jQuery实现的漂亮表单效果代码
Aug 18 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
Sep 01 Javascript
jquery实现的判断倒计时是否结束代码
Feb 05 Javascript
Bootstrap基本组件学习笔记之分页(12)
Dec 08 Javascript
微信小程序中实现一对多发消息详解及实例代码
Feb 14 Javascript
js实现添加删除表格(两种方法)
Apr 27 Javascript
JS分页的实现(同步与异步)
Sep 16 Javascript
微信小程序之多文件下载的简单封装示例
Jan 29 Javascript
Vue实现的父组件向子组件传值功能示例
Jan 19 Javascript
jQuery实现监控页面所有ajax请求的方法
Dec 10 #Javascript
js表单提交和submit提交的区别实例分析
Dec 10 #Javascript
浅谈javascript中onbeforeunload与onunload事件
Dec 10 #Javascript
详解JavaScript基于面向对象之创建对象(2)
Dec 10 #Javascript
JS提交form表单实例分析
Dec 10 #Javascript
详解JavaScript基于面向对象之创建对象(1)
Dec 10 #Javascript
AngularJs实现ng1.3+表单验证
Dec 10 #Javascript
You might like
《PHP边学边教》(02.Apache+PHP环境配置――下篇)
2006/12/13 PHP
PHP生成带有雪花背景的验证码
2008/09/28 PHP
判断是否为指定长度内字符串的php函数
2010/02/16 PHP
php中session定期自动清理的方法
2015/11/12 PHP
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
2007/08/15 Javascript
解析Jquery取得iframe中元素的几种方法
2013/07/04 Javascript
node.js中的dns.getServers方法使用说明
2014/12/08 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
2015/07/02 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
javascript显示上周、上个月日期的处理方法
2016/02/03 Javascript
JS深度拷贝Object Array实例分析
2016/03/31 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
2016/06/29 Javascript
微信小程序进行微信支付的步骤昂述
2016/12/01 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
2017/09/14 Javascript
vue检测对象和数组的变化分析
2018/06/30 Javascript
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
解决Vue大括号字符换行踩的坑
2020/11/09 Javascript
Python使用设计模式中的责任链模式与迭代器模式的示例
2016/03/02 Python
python在html中插入简单的代码并加上时间戳的方法
2018/10/16 Python
浅谈PySpark SQL 相关知识介绍
2019/06/14 Python
Python绘图实现显示中文
2019/12/04 Python
Python在字符串中处理html和xml的方法
2020/07/31 Python
Python selenium爬取微信公众号文章代码详解
2020/08/12 Python
Python特殊属性property原理及使用方法解析
2020/10/09 Python
matplotlib自定义鼠标光标坐标格式的实现
2021/01/08 Python
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
包装类的功能、种类、常用方法
2012/01/27 面试题
建筑工程技术应届生自荐信
2013/09/27 职场文书
职业生涯规划书的格式
2013/12/29 职场文书
汽车制造与装配专业自荐信范文
2014/01/02 职场文书
支教自我鉴定
2014/01/18 职场文书
庆祝国庆节标语
2014/10/09 职场文书
2014年旅游局法制宣传日活动总结
2014/11/01 职场文书
考研导师推荐信范文
2015/03/27 职场文书
2015年校本培训工作总结
2015/07/24 职场文书
安全生产培训心得体会
2016/01/18 职场文书