向当前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 相关文章推荐
Javascript学习笔记5 类和对象
Jan 11 Javascript
javascript setinterval 的正确语法如何书写
Jun 17 Javascript
$(document).ready(function() {})不执行初始化脚本
Jun 19 Javascript
jQuery实现伸展与合拢panel的方法
Apr 30 Javascript
如何判断出一个js对象是否一个dom对象
Nov 24 Javascript
Bootstrap基本插件学习笔记之按钮(21)
Dec 08 Javascript
你有必要知道的10个JavaScript难点
Jul 25 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
Jan 04 Javascript
如何去除vue项目中的#及其ie9兼容性
Jan 11 Javascript
图文详解vue框架安装步骤
Feb 12 Javascript
关于layui 下拉列表的change事件详解
Sep 20 Javascript
vue 使用async写数字动态加载效果案例
Jul 18 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字符串的递增和递减示例介绍
2014/02/11 PHP
php使用number_format函数截取小数的方法分析
2016/05/27 PHP
PHP正则表达式处理函数(PCRE 函数)实例小结
2019/05/09 PHP
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
在JavaScript中操作数组之map()方法的使用
2015/06/09 Javascript
JavaScript常用字符串与数组扩展函数小结
2016/04/24 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
2016/05/03 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
2016/07/22 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
2016/09/09 Javascript
微信小程序 request接口的封装实例代码
2017/04/26 Javascript
webstorm+vue初始化项目的方法
2018/10/18 Javascript
Angular事件之不同组件间传递数据的方法
2018/11/15 Javascript
javascript的delete运算符知识点总结
2019/11/19 Javascript
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
Python编写百度贴吧的简单爬虫
2015/04/02 Python
用Python实现换行符转换的脚本的教程
2015/04/16 Python
python通过函数属性实现全局变量的方法
2015/05/16 Python
Python OpenCV处理图像之图像直方图和反向投影
2018/07/10 Python
python调用staf自动化框架的方法
2018/12/26 Python
python re.sub()替换正则的匹配内容方法
2019/07/22 Python
如何在 Django 模板中输出 &quot;{{&quot;
2020/01/24 Python
TensorFlow内存管理bfc算法实例
2020/02/03 Python
Python中Selenium模块的使用详解
2020/10/09 Python
前端面试必备之CSS3的新特性
2017/09/05 HTML / CSS
诺心蛋糕官网:LE CAKE
2018/08/25 全球购物
什么是Linux虚拟文件系统VFS
2012/01/31 面试题
Java程序员面试题
2013/07/15 面试题
大学生的网上创业计划书
2013/12/31 职场文书
竞聘上岗演讲稿范文
2014/01/10 职场文书
大学辅导员事迹材料
2014/02/05 职场文书
保密工作实施方案
2014/02/24 职场文书
协议书与合同的区别
2014/04/18 职场文书
社区爱国卫生月活动总结
2014/06/30 职场文书
初中毕业生自我评价
2015/03/02 职场文书
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS
Mysql中mvcc各场景理解应用
2022/08/05 MySQL