向当前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实现的一个include函数
Jul 21 Javascript
JavaScript通过select动态更换图片的方法
Mar 23 Javascript
js学习阶段总结(必看篇)
Jun 16 Javascript
jquery.masonry瀑布流效果
May 25 jQuery
微信小程序之绑定点击事件实例详解
Jul 07 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
Feb 26 Javascript
从零开始学习搭建React脚手架项目
Aug 23 Javascript
微信 jssdk 签名错误invalid signature的解决方法
Jan 14 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
Jan 17 Javascript
JS学习笔记之闭包小案例分析
May 29 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
Nov 11 Javascript
微信小程序实现首页弹出广告
Dec 03 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
php获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
php判断字符串在另一个字符串位置的方法
2014/02/27 PHP
php递归json类实例
2014/12/02 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
PHP数组与字符串互相转换实例
2020/05/05 PHP
JQuery 操作Javascript对象和数组的工具函数小结
2010/01/22 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
2013/11/19 Javascript
调试JavaScript中正则表达式中遇到的问题
2015/01/27 Javascript
jQuery使用addClass()方法给元素添加多个class样式
2015/03/26 Javascript
javascript三元运算符用法实例
2015/04/16 Javascript
jQuery与js实现颜色渐变的方法
2016/12/30 Javascript
RequireJS 依赖关系的实例(推荐)
2017/01/21 Javascript
uploader秒传图片到服务器完整代码
2017/04/22 Javascript
快速将Vue项目升级到webpack3的方法步骤
2017/09/14 Javascript
vue.js内置组件之keep-alive组件使用
2018/07/10 Javascript
学习React中ref的两个demo示例
2018/08/14 Javascript
浅谈VUE单页应用首屏加载速度优化方案
2018/08/28 Javascript
js 递归json树实现根据子id查父id的方法分析
2019/11/08 Javascript
微信小程序使用 vant Dialog组件的正确方式
2020/02/21 Javascript
Python遍历目录并批量更换文件名和目录名的方法
2016/09/19 Python
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
利用Pandas 创建空的DataFrame方法
2018/04/08 Python
Python实现按当前日期(年、月、日)创建多级目录的方法
2018/04/26 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
django框架中间件原理与用法详解
2019/12/10 Python
Python实现屏幕录制功能的代码
2020/03/02 Python
如何实现更换Jupyter Notebook内核Python版本
2020/05/18 Python
Python经纬度坐标转换为距离及角度的实现
2020/11/01 Python
飞利浦比利时官方网站:Philips比利时
2016/08/24 全球购物
小学红领巾中秋节广播稿
2014/01/13 职场文书
高中生的自我鉴定范文
2014/01/24 职场文书
三年级语文教学反思
2014/02/01 职场文书
文案策划求职信
2014/04/14 职场文书
团代会邀请函
2015/02/02 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书