向当前style sheet中插入一个新的style实现方法


Posted in Javascript onApril 01, 2013

很少会插入一个新的style rule,今天为了临时解决页面样式问题,需要更新很多页面的一些样式,这些页面都引用了一个公共的js,为了方便,直接在这个公共的js里面向style sheet插入新的style rule。

先看代码:

/** 
* Add a stylesheet rule to the document (may be better practice, however, 
* to dynamically change classes, so style information can be kept in 
* genuine styesheets (and avoid adding extra elements to the DOM)) 
* Note that an array is needed for declarations and rules since ECMAScript does 
* not afford a predictable object iteration order and since CSS is 
* order-dependent (i.e., it is cascading); those without need of 
* cascading rules could build a more accessor-friendly object-based API. 
* @param {Array} decls Accepts an array of JSON-encoded declarations 
* @example 
addStylesheetRules([ 
['h2', // Also accepts a second argument as an array of arrays instead 
['color', 'red'], 
['background-color', 'green', true] // 'true' for !important rules 
], 
['.myClass', 
['background-color', 'yellow'] 
] 
]); 
*/ 
function addStylesheetRules (decls) { 
var style = document.createElement('style'); 
document.getElementsByTagName('head')[0].appendChild(style); 
if (!window.createPopup) { /* For Safari */ 
style.appendChild(document.createTextNode('')); 
} 
var s = document.styleSheets[document.styleSheets.length - 1]; 
for (var i=0, dl = decls.length; i < dl; i++) { 
var j = 1, decl = decls[i], selector = decl[0], rulesStr = ''; 
if (Object.prototype.toString.call(decl[1][0]) === '[object Array]') { 
decl = decl[1]; 
j = 0; 
} 
for (var rl=decl.length; j < rl; j++) { 
var rule = decl[j]; 
rulesStr += rule[0] + ':' + rule[1] + (rule[2] ? ' !important' : '') + ';\n'; 
} 
if (s.insertRule) { 
s.insertRule(selector + '{' + rulesStr + '}', s.cssRules.length); 
} 
else { /* IE */ 
s.addRule(selector, rulesStr, -1); 
} 
} 
}

addStylesheetRules(["div.content", ["color": "#000"], ["border-width","1px"], ["border-style", "solid"]])

执行后当前document的head标签内,多了一个style
<style> 
div.content{color:#000;border:1px solid} 
</style

知道怎么调用了吧,每次调用都会插入一个新的style,所以最好调用一次,插入多个rule
addStylesheetRules( 
[selector, [attr, value], …], 
[selector, [attr, value], …] 
);

主要用到两个方法
标准方法:stylesheet.insertRule(rule, index)
rule:被插入的rule,如 div.content{color:#000}
index: 插入顺序,先后顺序会影响样式的。从0开始
firefox、chrome、opera、safri、ie从ie9开始也支持这个方法
ie的stylesheet.addRule (selector, styleDef [, positionIndex]);
selector:如div.content
styleDef:如color:#000
positionIndex:默认-1,插入到末尾
ie、safari、chrome支持这个方法
Javascript 相关文章推荐
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
Nov 26 Javascript
Jquery 一次处理多个ajax请求的代码
Sep 02 Javascript
Egret引擎开发指南之编译项目
Sep 03 Javascript
jquery滚动特效集锦
Jun 03 Javascript
简单介绍JavaScript中字符串创建的基本方法
Jul 07 Javascript
Active控件问题小结(附解决办法)
Jun 09 Javascript
js关于getImageData跨域问题的解决方法
Oct 14 Javascript
vue的props实现子组件随父组件一起变化
Oct 27 Javascript
探索Javascript中this的奥秘
Dec 11 Javascript
基于Vue渲染与插件的加载顺序的问题详解
Mar 05 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
Feb 20 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
Nov 26 Javascript
select标签模拟/美化方法采用JS外挂式插件
Apr 01 #Javascript
html组件不可输入(只读)同时任何组件都有效
Apr 01 #Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
Mar 31 #Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
Mar 29 #Javascript
表单验证的完整应用案例探讨
Mar 29 #Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
Mar 29 #Javascript
图片img的src不变让浏览器重新加载实现方法
Mar 29 #Javascript
You might like
用PHP实现多级树型菜单
2006/10/09 PHP
YII2.0之Activeform表单组件用法实例
2016/01/09 PHP
javascript getElementsByClassName实现代码
2010/10/11 Javascript
基于JQuery实现的类似购物商城的购物车
2011/12/06 Javascript
javascript禁用Tab键脚本实例
2013/11/22 Javascript
浅谈JavaScript函数参数的可修改性问题
2013/12/05 Javascript
javascript制作loading动画效果 loading效果
2014/01/14 Javascript
JS执行删除前的判断代码
2014/02/18 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
2015/11/09 Javascript
javascript数组去重小结
2016/03/07 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
2017/06/30 Javascript
基于JavaScript表单脚本(详解)
2017/10/18 Javascript
Express系列之multer上传的使用
2017/10/27 Javascript
基于JavaScript实现五子棋游戏
2020/08/26 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
vue与bootstrap实现简单用户信息添加删除功能
2019/02/15 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
2019/03/04 Javascript
JavaScript console的使用方法实例分析
2020/04/28 Javascript
JS JQuery获取data-*属性值方法解析
2020/09/01 jQuery
微信小程序反编译的实现
2020/12/10 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
python中迭代器(iterator)用法实例分析
2015/04/29 Python
Django框架用户注销功能实现方法分析
2019/05/28 Python
使用python对多个txt文件中的数据进行筛选的方法
2019/07/10 Python
PyQt5通信机制 信号与槽详解
2019/08/07 Python
Python函数生成器原理及使用详解
2020/03/12 Python
Python decimal模块使用方法详解
2020/06/08 Python
使用纯 CSS 创作一个脉动 loader效果的源码
2018/09/28 HTML / CSS
大学生毕业自我鉴定范文
2014/02/03 职场文书
元旦晚会策划方案
2014/02/18 职场文书
2014年流动人口工作总结
2014/11/26 职场文书
清明节网上祭英烈寄语2015
2015/03/04 职场文书
2015年感恩节演讲稿(优选篇)
2015/03/20 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
小学语文继续教育研修日志
2015/11/13 职场文书