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 };
//参考: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中 }