//add   addCssRule('.bcd',{'color':'red','font-weight':'bold','font-size':'12px'},document.styleSheets[1]);
function addCssRule(selector,styles,styleSheet,index){
var sheets = styleSheet instanceof Array ? styleSheet : [styleSheet],
style = '',
declaration = '';
for(var pro in styles){
if(styles.hasOwnProperty(pro)){
declaration += (pro + ':' + styles[pro] + ';');
}
}
style = selector + '{' + declaration + '}';
for(var i = 0,j = sheets.length; i < j;i++){
if(sheets[i].insertRule){
index = index >= 0 ? index : sheets[i]['cssRules'].length;
sheets[i].insertRule(style,index);
}else if(sheets[i].addRule){ //IE
index = index >= 0 ? index : -1; //-1为末尾
sheets[i].addRule(selector,declaration,index);
}
}
} //modify editCssRule('.abc',{'font-weight':'bold','font-size':'14px'},document.styleSheets[1]);
function editCssRule(selector,styles,styleSheet){
var sheets = styleSheet instanceof Array ? styleSheet : [styleSheet];
selector = selector.toUpperCase(); // ie9以下标签选择器默认是大写 这里统一下
//对大小写敏感的selector 会有问题
for(var i = 0,j = sheets.length; i < j;i++){
var rules = sheets[i]['cssRules'] || sheets[i]['rules']; //ie为 rules
if(!rules){ continue;}
for(var m = 0,n = rules.length;m < n;m++){
if(rules[m]['selectorText'].toUpperCase() == selector){
for(var pro in styles){
if(styles.hasOwnProperty(pro)){
rules[m].style[cssCamilize(pro)] = styles[pro];
}
}
}
}
}
} //del delCssRule('.bcd',document.styleSheets[1]);
function delCssRule(selector,styleSheet,index){
var sheets = styleSheet instanceof Array ? styleSheet : [styleSheet];
selector = selector.toUpperCase();
for(var i = 0,j = sheets.length; i < j;i++){
var rules = sheets[i]['cssRules'] || sheets[i]['rules']; //ie为 rules
if(index >=0 && index < rules.length){
sheets[i].deleteRule ? sheets[i].deleteRule(index) : sheets[i].removeRule(index);
}else if(selector){
for(var m = 0,n = rules.length;m < n;m++){
if(rules[m]['selectorText'].toUpperCase() == selector){
sheets[i].deleteRule ? sheets[i].deleteRule(m) : sheets[i].removeRule(m);; //可能存在多个一样的selector 全部删除
}
}
}else{
return false;
}
}
}; function cssCamilize(str){
return str.replace(/-(\w)/g,function($1,$2){
return $2.toUpperCase();
});
};
//参考:http://www.cnblogs.com/2050/p/4029656.html
function addCSS(cssText){
var style = document.createElement('style'), //创建一个style元素
head = document.head || document.getElementsByTagName('head')[0]; //获取head元素
style.type = 'text/css'; //这里必须显示设置style元素的type属性为text/css,否则在ie中不起作用
if(style.styleSheet){ //IE
var func = function(){
try{ //防止IE中stylesheet数量超过限制而发生错误
style.styleSheet.cssText = cssText;
}catch(e){ }
}
//如果当前styleSheet还不能用,则放到异步中则行
if(style.styleSheet.disabled){
setTimeout(func,10);
}else{
func();
}
}else{ //w3c
//w3c浏览器中只要创建文本节点插入到style元素中就行了
var textNode = document.createTextNode(cssText);
style.appendChild(textNode);
}
head.appendChild(style); //把创建的style元素插入到head中
}

javascript 操作 css Rule的更多相关文章

  1. [javascript][翻译]使用javascript添加css rule

    来杭一周,收获很多,成长很多. 周六在搞一个插件的时候碰到需要动态添加伪元素的需求,搜了一下解决方案,有人用正则写出了读取伪元素的函数:我觉得倒是可以通过注入css rule的方式,来让预留有某些类的 ...

  2. 使用javascript和css模拟帧动画的几种方法浅析

    我们平时在开发前端页面的时候,经常会播放一段帧序列.这段帧序列就像gif图片那样,反复循环播放.那大家可能会说,直接用gif图片就好了,干嘛还去模拟呢?那是因为要做得更加灵活,我们要做到以下几点: 1 ...

  3. 通过JS操作CSS

    动态效果如图所示: 第一种实现方法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  4. Javascript动态操作CSS总结

    一.使用js操作css属性的写法 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin,obj.style.width,obj.style.left ...

  5. javascript操作html元素CSS属性

    下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... <style type="text/css"> .ori ...

  6. 使用 JS 来动态操作 css ,你知道几种方法?

    JavaScript 可以说是交互之王,它作为脚本语言加上许多 Web Api 进一步扩展了它的特性集,更加丰富界面交互的可操作性.这类 API 的例子包括WebGL API.Canvas API.D ...

  7. 5种JavaScript和CSS交互的方法

      分享   分享   分享   分享   分享   随着浏览器不断的升级改进,CSS和JavaScript之间的界限越来越模糊.本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需 ...

  8. 5种你未必知道的JavaScript和CSS交互的方法

    随着浏览器不断的升级改进,CSS和JavaScript之间的界限越来越模糊.本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需要相互密切的合作.我们的网页中都有.js文件和.css ...

  9. JavaScript 操作 DOM 常用 API 总结

    文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...

随机推荐

  1. opencv中Mat类型数据操作与遍历

    Mat作为opencv中一种数据类型常常用来存储图像,相对与以前的IplImgae类型来说,Mat类型省去了人工的对内存的分配与释放,转而自动分配释放.Mat Class主要包括两部个数据部分:一个是 ...

  2. [POJ] 1948 Triangular Pastures (DP)

    题目地址:http://poj.org/problem?id=1948 题目大意: 给N条边,把这些边组成一个三角形,问面积最大是多少?必须把所有边都用上. 解题思路: 根据题意周长c已知,求组合三边 ...

  3. 编译TWRP-recovery教程及源码地址

    TWRP这个是一个老外的开源项目,全称Team-Win-Recovery-Project Source:https://github.com/TeamWin/Team-Win-Recovery-Pro ...

  4. android项目中各个文件的介绍

    src:java源码gen:自动生成 R.javaandroid.jarandroid Dependenvies 支持jar包assets:资产目录 小的数据库 网页 bin:编译生成的临时文件lib ...

  5. PL/SQL 0.几秒出结果,SQL效率一定高吗?

    今天开发问我一个问题,PL/SQL很快出结果了,为什么应用还是很慢 create index F_AGT_SAVB_ACCTINFO_H_idx4 on F_AGT_SAVB_ACCTINFO_H ( ...

  6. CH Round #55 - Streaming #6 (NOIP模拟赛day2)

    A.九九归一 题目:http://ch.ezoj.tk/contest/CH%20Round%20%2355%20-%20Streaming%20%236%20(NOIP模拟赛day2)/九九归一 题 ...

  7. JVM运行原理及Stack和Heap的实现过程

    Java语言写的源程序通过Java编译器,编译成与平台无关的‘字节码程序’(.class文件,也就是0,1二进制程序),然后在OS之上的Java解释器中解释执行,而JVM是java的核心和基础,在ja ...

  8. freeCMS学习网站

    https://code.google.com/p/freecms/downloads/list

  9. JDBC编程之优化

    1.创建 dbconfig.properties driver=com.mysql.jdbc.Driver dburl=jdbc\:mysql\://localhost\:3306/mytest us ...

  10. 我为什么要再给lua写一个json模块

    最近要给自己编写的服务器加上json解析模块.根据我当前的项目,可以预测服务器中使用json的地方: 通信.由于与客户端通信使用google protocolbuffer,仅在与SDK通信中使用jso ...