版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/62046940
styleSheets
用styleSheets获取样式集合(包括link中的和style中的,都兼容)
var sheet = document.styleSheets // 获取样式集合
var data = document.styleSheets; // 返回一个样式表集合
var rules = data[0].cssRules; // 返回第一个样式中的规则集合
alert(data.length); // 2 获取样式表的数量
alert(rules.length); // 2 获取样式表中规则的数量
disabled 禁用指定样式表(true表示禁用样式)
var data = document.styleSheets[0]; // 获取第一个样式表
data.disabled = true; // 禁用第一个样式表
href 获取样式的URL
document.write(data.href);
效果: <i><b>file:///D:/Code/HTML/JavaScript/CSS/js_style.css</b></i>
cssRules 样式表规则集合(IE用rules)
只能获得style标签中的样式
cssRules.cssText 获得css文本
selectorText 获得选择符
var data = document.styleSheets; // 获取样式集合
var rules = data[0].cssRules; // 获取规则集合
alert(rules.length); // 获取规则数量
alert(rules[0].cssText); // 获取第一条规则的css代码
alert(rules[0].selectorText); // 获取第一条规则的选择器名
添加和删除规则
deleteRule(num) 删除第num条规则(IE用removeRule)
insertRule(“样式”,num) 插入样式(IE 用addRule(“标签”,”样式”,num))
var data = document.styleSheets[0];
data.deleteRule(0); // 删除样式
data.insertRule("body{background-color:red;}",0); // 添加样式
style
var data = document.styleSheets[0];
var rules = data.cssRules;
alert(rules[0].style.backgroundColor); //orange
rules[0].style.backgroundColor = "blue"; // 更改背景色为blue
这一部分内容有很多的兼容性问题,以后再做研究