JS:操作样式表3：内联和外链样式

　　var box = document.getElementById("box");

 

　　box.style.属性;只能读取修改行内样式。

　　//访问元素样式2，对外链样式表进行操作

　　document.styleSheets //得到的是样式表集合 styleSheetList

　　var sheet = document.styleSheets[0];//取得要修改的第一个样式表

 

一：操作

　　1.//非ie浏览器下可以识别一下方法和属性
　　　　alert(sheet.cssRules); //样式集合列表
　　　　sheet.deleteRule(0); //删除样式规则（此处上的是第一css样式）
　　　　sheet.insertRule("body {background-color:red}",0); //在第一个位置添加一个样式规则

　　2.//针对ie浏览器使用如下：

　　　　alert(sheet.rules);
　　　　sheet.removeRule(0);
　　　　sheet.addRule("body","background-color:red",0);

　　//操作样式表，兼容所有浏览器：将1和2结合在一起：　　

　　　　document.styleSheets;
　　　　var sheet = document.styleSheets[0];//CSSstyleSheet 取得要修改的样式表

　　　　cinsertRule(sheet,"div","background-color:green; color:pink; font-size:18px; width:200px;",0);//对已有的属性修改不成功

　　　　//添加css规则，并且兼容所有浏览器
　　　　　　function cinsertRule (sheet, selectorText,cssText,position) {
　　　　　　　　//如果是非IE
　　　　　　　　if (sheet.insertRule) {
　　　　　　　　　　sheet.insertRule(selectorText + "{"+cssText+"}", position);
　　　　　　　　} //如果是ie
　　　　　　　　　else if (sheet.addRule) {
　　　　　　　　　　sheet.addRule(selectorText,cssText,position);
　　　　　　　　　　};
　　　　　　　}

　　　　　　cdeteRule(sheet, 1); //将原来写的css规则删去，但上面新增加的并没有删去

　　　　//删除css规则，并且兼容所有浏览器
　　　　　　function cdeteRule (sheet,index) {
　　　　　　　　if (sheet.deleteRule) {
　　　　　　　　　　sheet.deleteRule(index);
　　　　　　　　　}
　　　　　　　　　　else if (sheet.removeRule) {
　　　　　　　　　　　　　　sheet.removeRule(index);
　　　　　　　　};
　　　　　　}

 

 

　二，取值

　　　　//通过外链形式，获取样式文本，选择器，样式值
　　　　　　var sheet3 = document.styleSheets[0];
　　　　　　var rules3 = sheet3.cssRules||sheet3.rules; //兼容ie和非ie
　　　　　　var crule = rules3[0];
　　　　　　alert(crule.cssText); //.div {color:red;font-size:20px;float:right;} 没有调用删除和添加规则函数
　　　　　　alert(crule.selectorText); //.box
　　　　　　alert(crule.style.color); //red

 

 

ps：  第二种写法更简洁。