向当前stylesheet中插入一个新的style实现方法_javascript技巧
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了向当前stylesheet中插入一个新的style实现方法_javascript技巧,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3796字,纯文字阅读大概需要6分钟。
内容图文
![向当前stylesheet中插入一个新的style实现方法_javascript技巧](/upload/InfoBanner/zyjiaocheng/317/d49ea91da97d4a27811de14a232f932e.jpg)
先看代码:
代码如下:
/**
* 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,所以最好调用一次,插入多个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支持这个方法
![](http://www.gxlcms.com/Public/aiod/ts.jpg)
JavaScript热搜
- Vue利用canvas实现移动端手写板的方法
- vue2.0 移动端实现下拉刷新和上拉加载更多的示例
- 解决vue-router中的query动态传参问题
- 解决使用vue.js路由后失效的问题
- 微信小程序实现换肤功能
- JS中touchstart事件与click事件冲突的解决方法
- 完美解决axios在ie下的兼容性问题
- 在vue项目中引入highcharts图表的方法(详解)
- Vue的轮播图组件实现方法
- angular基于ng-alain定义自己的select组件示例
- 详解vue移动端日期选择组件
- JS/jQuery实现DIV延时几秒后消失或显示的方法
- 微信小程序数字滚动插件使用详解
- 详解基于vue-cli配置移动端自适应
- js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
- Swiper自定义分页器使用详解
- 深入浅出webpack之externals的使用
- 微信小程序实现简单input正则表达式验证功能示例
- Vue-Access-Control 前端用户权限控制解决方案
- 浅谈Vue SSR 的 Cookies 问题
- nodejs async异步常用函数总结(推荐)
- 结合mint-ui移动端下拉加载实践方法总结
- Angular 4根据组件名称动态创建出组件的方法教程
- 微信小程序媒体组件详解(视频,音乐,图片)
- weex里Vuex state使用storage持久化详解
![](http://www.gxlcms.com/ad/tx500x500.jpg)