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的方法,希望对大家的学习有所帮助。

(0)

相关推荐

  • 得到文本框选中的文字,动态插入文字的js代码

    复制代码 代码如下: <script language="javascript" src="js/settags.js"></script>  function AppTag(tagcode)  {   document.PostMessage.Message.value += tagcode;  } function InsertTag(tagbegin,tagend)  {   if ((document.selection)&&

  • 告诉你什么是javascript的回调函数

    函数也是对象 想弄明白回调函数,首先的清楚地明白函数的规则.在javascript中,函数是比较奇怪的,但它确确实实是对象.确切地说,函数是用Function()构造函数创建的Function对象.Function对象包含一个字符串,字符串包含函数的javascript代码.假如你是从C语言或者java语言转过来的,这也许看起来很奇怪,代码怎么可能是字符串?但是对于javascript来说,这很平常.数据和代码之间的区别是很模糊的. //可以这样创建函数 var fn = new Functio

  • js的回调函数详解

    现在做native App  和Web App是主流,也就是说现在各种基于浏览器的web app框架也会越来越火爆了,做js的也越来越有前途.我也决定从后端开发渐渐向前端开发和手机端开发靠拢,废话不说了,我们来切入正题"js的回调函数"相关的东西. 说起回调函数,好多人虽然知道意思,但是还是一知半解.至于怎么用,还是有点糊涂.网上的一些相关的也没有详细的说一下是怎么回事,说的比较片面.下面我只是说说个人的一点理解,大牛勿喷.我们来看一下一个粗略的一个定义"函数a有一个参数,这

  • js中回调函数的学习笔记

    回调函数是什么在学习之前还真不知道js回调函数怎么使用及作用了,下面本文章把我在学习回调函数例子给各位同学介绍一下吧,有需了解的同学不防进入参考. 回调函数原理: 我现在出发,到了通知你" 这是一个异步的流程,"我出发"这个过程中(函数执行),"你"可以去做任何事,"到了"(函数执行完毕)"通知你"(回调)进行之后的流程 例子 1.基本方法 <script language="javascript&q

  • Javascript基于AJAX回调函数传递参数实例分析

    本文实例讲述了Javascript基于AJAX回调函数传递参数的方法.分享给大家供大家参考,具体如下: 前面介绍了<javascript实现html页面之间参数传递的四种方法>,这里针对ajax参数传递做一分析. 在Javascript 中,特别是在AJAX中,回调函数常常是一个函数名,没有地方放入参数,如下面的AJAX代码,在成功后将调用回调函数callback,但callback是有参数的,如何把参数传进来呢? var callback = function(p1){ //do somet

  • 深入理解javascript动态插入技术

    最近发现各大类库都能利用div.innerHTML=HTML片断来生成节点元素,再把它们插入到目标元素的各个位置上.这东西实际上就是insertAdjacentHTML,但是IE可恶的innerHTML把这优势变成劣势.首先innerHTML会把里面的某些位置的空白去掉,见下面运行框的结果: 复制代码 代码如下: <!doctype html><html dir="ltr" lang="zh-CN">    <head>     

  • js自定义回调函数

    背景分析 首先看一段js的代码,主要实现添加的时候首先通过异步请求判断是否存在,如果不存在的话,在进行添加操作: function add(url,data) { var isExited = isExited(data); if(!isExited){ addRequest(url, data); } } 当我添加一个数据的时候,我首先通过判断是否在数据库中存在(当然,如果前后台彻底分离的话,不应该前端进行业务逻辑的判断,前端只应该,用来展示数据),首先,isExited()的请求是ajax请

  • JavaScript动态插入script的基本思路及实现函数

    在日常的前端开发中,偶尔有需要动态插入javascript代码的需求,基本思路是: 1.动态创建一个script标签,设置其src属性,type属性等 2.将script节点插入页面,加载js文件 即相当于将<script type="text/javascript" src="xxx.js"></script>添加到了页面,只不过这个过程是动态完成的,为此特意封装了一个函数来实现: 复制代码 代码如下: // 动态插入script标签 fu

  • 谈谈JavaScript自定义回调函数

    废话不多说了,直接给大家贴代码了. 背景分析 首先看一段js的代码,主要实现添加的时候首先通过异步请求判断是否存在,如果不存在的话,在进行添加操作: function add(url,data) { var isExited = isExited(data); if(!isExited){ addRequest(url, data); } } 当我添加一个数据的时候,我首先通过判断是否在数据库中存在(当然,如果前后台彻底分离的话,不应该前端进行业务逻辑的判断,前端只应该,用来展示数据),首先,i

  • JS动态插入并立即执行回调函数的方法

    本文实例讲述了JS动态插入并立即执行回调函数的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • 如何让动态插入的javascript脚本代码跑起来。

    首先,声明方法很多种,直接间接的方法都有,只罗列一般情况下的两种模式: 假设我们要装入的代码是a.js: var foo=function(){ document.write("I am a.js content foo() function by never-online"); }; 一.直接插入src,这种方法简单而直接,但有局限性, 1) <script> var x=document.createElement("SCRIPT"); x.src=

随机推荐