javascript 操作 css Rule

 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){  //IE

17                 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为 rules

30             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为 rules

49             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