//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. 基于python的接口测试学习笔记一(初出茅庐)

    第一次写博客笔记,讲一下近来学习的接口自动化测试.网上查阅了相关资料,最后决定使用python语言写接口测试,使用的是python的第三方库requests.虽然python本身标准库中的 urlli ...

  2. 成绩转换 AC 杭电

    成绩转换 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  3. C++调用DLL有两种方法——静态调用和动态调用

    C++调用DLL有两种方法——静态调用和动态调用 标签: dllc++winapinullc 2011-09-09 09:49 11609人阅读 评论(0) 收藏 举报  分类: cpp(30)  [ ...

  4. 【转】android:DDMS查看Threads--不错

    原文网址:http://www.cnblogs.com/mybkn/archive/2012/05/27/2520335.html 有时候程序运行出现死锁或者信号量卡死是很纠结的问题,单看代码很难分析 ...

  5. 五大P2P平台费用一览

    我看版上谈P2P的挺多的,正好我也投了点P2P, 今天看到一个不错的图 欢迎版上朋友讨论       -- 不忧不惧

  6. 重温Java的类加载机制

    原文地址:http://blog.csdn.net/hitxueliang/article/details/19992851 首先简要的说一下类加载器   我们知道,虚拟机的指令存储在以.class为 ...

  7. Java学习笔记(1)——基本数据类型

    一.进制转换 10^n被称为权  10称为基数   计算机中正数和负数的关系是取反加一, 如: ~3+1=-3 补码边界运算有溢出风险 32位二进制补码最多表示2^32个数, -2G~2G 1,计算机 ...

  8. 从一些简单代码实例彻底理解面向对象编程思想|OOP本质是什么?

    从Rob Pike 的 Google+上的一个推看到了一篇叫<Understanding Object Oriented Programming>的文章,我先把这篇文章简述一下,然后再说说 ...

  9. 在Eclipse里设置格式化代码时不格式化注释

    在Eclipse里设置格式化代码时不格式化注释 今天格式化代码 发现直接format会把注释也一块格式化了,有时候会把好好的注释弄的很乱.甚为头疼. 查阅之后解决办法如下: Windows -> ...

  10. (转)keytools命令

    结合网络资源,对keytool使用总结,以备后用: Keytool是一个Java数据证书的管理工具 ,Keytool将密钥(key)和证书(certificates)存在一个称为keystore的文件 ...