向当前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 相关文章推荐
登陆成功后自动计算秒数执行跳转
Jan 23 Javascript
Flexigrid在IE下不显示数据的有效处理方法
Sep 04 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
Dec 18 Javascript
JavaScript将XML转成JSON的方法
Mar 12 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
Apr 12 Javascript
Vue 单文件中的数据传递示例
Mar 21 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
Feb 13 Javascript
深入了解JavaScript 私有化
May 30 Javascript
vue 自动化路由实现代码
Sep 03 Javascript
详解vue高级特性
Jun 09 Javascript
js实现限定区域范围拖拉拽效果
Nov 20 Javascript
js实现弹框效果
Mar 24 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
第七节 类的静态成员 [7]
2006/10/09 PHP
PHP syntax error, unexpected $end 错误的一种原因及解决
2008/10/25 PHP
PHP入门之常量简介和系统常量
2014/05/12 PHP
php制作文本式留言板
2015/03/18 PHP
php的debug相关函数用法示例
2016/07/11 PHP
PHPCMS忘记后台密码的解决办法
2016/10/30 PHP
用JQuery 实现AJAX加载XML并解析的脚本
2009/07/25 Javascript
extjs 为某个事件设置拦截器
2010/01/15 Javascript
Javascript继承机制的设计思想分享
2011/08/28 Javascript
javascript 3d 逐侦产品展示(核心精简)
2014/03/26 Javascript
Linux下使用jq友好的打印JSON技巧分享
2014/11/18 Javascript
百度地图自定义控件分享
2015/03/04 Javascript
浅谈$_FILES数组为空的原因
2017/02/16 Javascript
深入学习 JavaScript中的函数调用
2017/03/23 Javascript
javascript实现循环广告条效果
2017/12/12 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
2018/09/19 Javascript
手把手教你写一个微信小程序(推荐)
2018/10/17 Javascript
微信小程序自定义可滑动日历界面
2018/12/28 Javascript
vue中监听返回键问题
2019/08/28 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
分享一个可以生成各种进制格式IP的小工具实例代码
2017/07/28 Python
让你的Python代码实现类型提示功能
2019/11/19 Python
Tensorflow获取张量Tensor的具体维数实例
2020/01/19 Python
python实现数字炸弹游戏程序
2020/07/17 Python
Python 找出英文单词列表(list)中最长单词链
2020/12/14 Python
修复iPhone的safari浏览器上submit按钮圆角bug
2012/12/24 HTML / CSS
早晨薰衣草在线女性精品店:Morning Lavender
2021/01/04 全球购物
大学本科毕业生的自我鉴定范文
2013/11/19 职场文书
综合办公室个人的自我评价
2013/12/22 职场文书
社团活动策划书范文
2014/01/09 职场文书
平安工地建设方案
2014/05/06 职场文书
2015年统计员个人工作总结
2015/07/23 职场文书
简短清晨问候语
2015/11/10 职场文书
在校大学生才艺比赛策划书怎么写?
2019/08/26 职场文书
一文解答什么是MySQL的回表
2022/08/05 MySQL