博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
javascript 操作 css Rule
阅读量:5158 次
发布时间:2019-06-13

本文共 3961 字,大约阅读时间需要 13 分钟。

1 //add   addCssRule('.bcd',{'color':'red','font-weight':'bold','font-size':'12px'},document.styleSheets[1]); 2     function addCssRule(selector,styles,styleSheet,index){ 3         var sheets = styleSheet instanceof Array ? styleSheet : [styleSheet], 4             style = '', 5             declaration = ''; 6         for(var pro in styles){ 7             if(styles.hasOwnProperty(pro)){ 8                 declaration += (pro + ':' + styles[pro] + ';'); 9             }10         }11         style = selector + '{' + declaration + '}';12         for(var i = 0,j = sheets.length; i < j;i++){13             if(sheets[i].insertRule){14                 index = index >= 0 ? index : sheets[i]['cssRules'].length;15                 sheets[i].insertRule(style,index);16             }else if(sheets[i].addRule){  //IE17                 index = index >= 0 ? index : -1;  //-1为末尾18                 sheets[i].addRule(selector,declaration,index);19             }20         }21     }22   23     //modify   editCssRule('.abc',{'font-weight':'bold','font-size':'14px'},document.styleSheets[1]);24     function editCssRule(selector,styles,styleSheet){25         var sheets = styleSheet instanceof Array ? styleSheet : [styleSheet];26         selector = selector.toUpperCase(); // ie9以下标签选择器默认是大写   这里统一下27         //对大小写敏感的selector 会有问题28         for(var i = 0,j = sheets.length; i < j;i++){29             var rules = sheets[i]['cssRules'] || sheets[i]['rules'];   //ie为 rules30             if(!rules){ continue;}31             for(var m = 0,n = rules.length;m < n;m++){32                 if(rules[m]['selectorText'].toUpperCase() == selector){33                     for(var pro in styles){34                         if(styles.hasOwnProperty(pro)){35                             rules[m].style[cssCamilize(pro)] = styles[pro];36                         }37                     }38                 }39             }40         }41     }42   43     //del   delCssRule('.bcd',document.styleSheets[1]);44     function delCssRule(selector,styleSheet,index){45         var sheets = styleSheet instanceof Array ? styleSheet : [styleSheet];46         selector = selector.toUpperCase();47         for(var i = 0,j = sheets.length; i < j;i++){48             var rules = sheets[i]['cssRules'] || sheets[i]['rules'];   //ie为 rules49             if(index >=0 && index < rules.length){50                 sheets[i].deleteRule ? sheets[i].deleteRule(index) : sheets[i].removeRule(index);51             }else if(selector){52                for(var m = 0,n = rules.length;m < n;m++){53                     if(rules[m]['selectorText'].toUpperCase() == selector){54                        sheets[i].deleteRule ? sheets[i].deleteRule(m) : sheets[i].removeRule(m);;  //可能存在多个一样的selector  全部删除55                     }56                 }57             }else{58                 return false;59             }60         }61     };62   63 function cssCamilize(str){64         return str.replace(/-(\w)/g,function($1,$2){65             return $2.toUpperCase();66         });67     };
View Code

 

//参考:http://www.cnblogs.com/2050/p/4029656.htmlfunction 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中    }
View Code

 

转载于:https://www.cnblogs.com/lmh2072005/p/4125932.html

你可能感兴趣的文章
Spring Mvc模式下Jquery Ajax 与后台交互操作
查看>>
(转)matlab练习程序(HOG方向梯度直方图)
查看>>
『Raid 平面最近点对』
查看>>
【ADO.NET基础-数据加密】第一篇(加密解密篇)
查看>>
C语言基础小结(一)
查看>>
STL中的优先级队列priority_queue
查看>>
UE4 使用UGM制作血条
查看>>
浏览器对属性兼容性支持力度查询网址
查看>>
OO学习总结与体会
查看>>
虚拟机长时间不关造成的问题
查看>>
校门外的树2 contest 树状数组练习 T4
查看>>
面试整理:Python基础
查看>>
Python核心编程——多线程threading和队列
查看>>
Program exited with code **** 相关解释
查看>>
植物大战僵尸中文年度版
查看>>
26、linux 几个C函数,nanosleep,lstat,unlink
查看>>
投标项目的脚本练习2
查看>>
201521123107 《Java程序设计》第9周学习总结
查看>>
Caroline--chochukmo
查看>>
iOS之文本属性Attributes的使用
查看>>