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: 第二种写法更简洁。