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 相关文章推荐
javascript实现的动态文字变换
Jul 28 Javascript
javascript显示用户停留时间的简单实例
Aug 05 Javascript
jQuery的ready方法详解
Nov 27 Javascript
javascript 实现 原路返回
Jan 21 Javascript
Javascript之Date对象详解
Jun 07 Javascript
JavaScript省市区三级联动菜单效果
Sep 21 Javascript
jQuery实现键盘回车搜索功能
Jul 25 jQuery
[js高手之路]HTML标签解释成DOM节点的实现方法
Aug 31 Javascript
解决Mac安装thrift因bison报错的问题
May 17 Javascript
微信小程序WebSocket实现聊天对话功能
Jul 06 Javascript
Bootstrap4 gulp 配置详解
Jan 06 Javascript
Vue实现下拉加载更多
May 09 Vue.js
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
什么是MVC,好东西啊
2007/05/03 PHP
使用 eAccelerator加速PHP代码的方法
2007/09/30 PHP
PHP中实现中文字符进制转换原理分析
2011/12/06 PHP
php中的mongodb select常用操作代码示例
2014/09/06 PHP
十个PHP高级应用技巧果断收藏
2015/09/25 PHP
最新制作ThinkPHP3.2.3完全开发手册
2015/11/23 PHP
使用phpstorm和xdebug实现远程调试的方法
2015/12/29 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
图像替换新技术 状态域方法
2010/01/28 Javascript
鼠标滚轮控制网页横向移动实现思路
2013/03/22 Javascript
Javascript 高阶函数使用介绍
2015/06/15 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
2016/08/11 Javascript
用director.js实现前端路由使用实例
2017/01/27 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
2017/05/10 Javascript
requirejs + vue 项目搭建详解
2017/06/16 Javascript
利用纯js + transition动画实现移动端web轮播图详解
2017/09/10 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
2019/11/07 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
2020/07/15 Javascript
vscode自定义vue模板的实现
2021/01/27 Vue.js
十个Python程序员易犯的错误
2015/12/15 Python
Python的Django中将文件上传至七牛云存储的代码分享
2016/06/03 Python
Python多进程multiprocessing用法实例分析
2017/08/18 Python
python暴力解压rar加密文件过程详解
2019/07/05 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
django中related_name的用法说明
2020/05/20 Python
CSS3中的注音对齐属性ruby-align用法指南
2016/07/01 HTML / CSS
Camille Jewelry官网:现代女性时尚首饰
2019/07/07 全球购物
计算机网络专业个人的自我评价
2013/10/17 职场文书
实用求职信范文分享
2013/12/25 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
警察群众路线整改措施
2014/09/26 职场文书
黄石寨导游词
2015/02/05 职场文书
2015暑假假期总结
2015/07/13 职场文书
vue数据字典取键值项目的字典问题
2022/04/12 Vue.js
Python中npy和mat文件的保存与读取
2022/04/24 Python