使用style对象可以操作行内样式，但无法访问样式表，而使用styleSheets对象可以访问<style>标签定义的内部样式表，以及<link>标签或@import命令导入的外部样式表，styleSheets对象属于document,通过document.styleSheets进行访问。
styleSheets为每个样式表定义了一个cssRules对象，用来包含指定样式表中所有的规则（样式），但IE不支持cssRules，需要使用rules对象表示样式中的规则
var cssRules=document.styleSheets[0].cssRules||document.styleSheets[0].rules;
例1：访问内联样式表
<style>
#box{
width:400px;
height: 200px;
background-color:#BFFB8F;
border:solid 1px blue;
}
</style>
<script>
window.οnlοad=function(){
var box=document.getElementById("box");
var cssRules=document.styleSheets[0].cssRules||document.styleSheets[0].rules;
box.innerHTML="<h3>盒子样式</h3>"
box.innerHTML+="<br>边框："+cssRules[0].style.border;
box.innerHTML+="<br>背景："+cssRules[0].style.backgroundColor;
box.innerHTML+="<br>宽度："+cssRules[0].style.width;
box.innerHTML+="<br>高度："+cssRules[0].style.height;
}
</script>
</head>
<body>
<div id="box"></div>
</body>
例2：访问样式表中的样式
访问内部 样式表---
<style>
#box{
width:400px;
height: 200px;
background-color:#BFFB8F;
border:solid 1px blue;
}
</style>
<script>
window.οnlοad=function(){
var box=document.getElementById("box");
var cssRules=document.styleSheets[0].cssRules||document.styleSheets[0].rules;
box.innerHTML="<h3>盒子样式</h3>"
box.innerHTML+="<br>边框："+cssRules[0].style.border;
box.innerHTML+="<br>背景："+cssRules[0].style.backgroundColor;
box.innerHTML+="<br>宽度："+cssRules[0].style.width;
box.innerHTML+="<br>高度："+cssRules[0].style.height;
}
</script>
访问外部样式表---
style1.css：
body{color:black;}
p{color:gray;}
div{color:white;}
--
<style>
#box{color:green;}
.red{color:red;}
.blue{color:blue;}
</style>
<link rel="stylesheet" type="text/css" href="css/style1.css" target="_blank" rel="external nofollow" />
<script type="text/javascript">
window.οnlοad=function(){
var box=document.getElementById("box");
var cssRules0=document.styleSheets[0].cssRules||document.styleSheets[0].rules;
var cssRules=document.styleSheets[1].cssRules||document.styleSheets[1].rules;
box.innerHTML="第二个样式表中，第一个样式的color属性值="+cssRules[0].style.color;//black
box.innerHTML+="<br>第一个样式表中第三个样式选择符="+cssRules0[2].selectorText;//.blue读取样式的选择符
cssRules0[2].style.color="#999";//编辑样式
}
</script>
</head>
<body>
<div id="box"></div>
<p class="blue">原蓝色字体，变为浅灰色</p>
</body>
添加样式 styleSheet.addRule(selector,style,[index]) 、styleSheet.inserRule(rule,[index]);
styleSheet.addRule(selector,style,[index]);//选择符（字符串），样式声明（字符串），索引号（默认-1，表示样式表的末尾）
但Firefox不支持addRule，使用
styleSheet.inserRule(rule,[index]);//完整样式（字符串），索引号(默认为0，放置在样式表的末尾)
例
<style>
#box{color:green;}
.red{color:red;}
.blue{color:blue;}
</style>
<script type="text/javascript">
var styleSheets=document.styleSheets[0];
var index=styleSheets.length;//获取样式表中包含的个数
if(styleSheets.insertRule){
styleSheets.insertRule("p{background-color:red;color:#fff;padding:1 em;}",index);
}else{
styleSheets.addRule("P","background-color:red;color:#fff;padding:1 em;",index)
}
</script>
</head>
<body>
<p>在样式表中添加样式</p>
</body>
访问显示样式p.currentStyle.backgroundColor 或 document.defaultView.getComputedStyle(p,null).backgroundColor
IE下：currentStyle只读对象，此对象包含了文档内所有元素的style对象的属性，以及任何未被覆盖的CSS规则的style属性
样式重叠是，可使用currentStyle对象获取当前p元素的最终显示哪些样式，这样可以找到inserRule（）或addRule（）添加样式失效的原因
非IE下：document.defaultView对象下getComputedStyle(p,null)方法：第一个参数表示元素，第二个参数表示伪类字符串，定义显示位置，一般可以省略，或者设置为null
<style>
#box{color:green;}
.red{color:red;}
.blue{color:blue;background-color: #FFFFFF;}
</style>
<script type="text/javascript">
window.οnlοad=function(){
var styleSheets=document.styleSheets[0];
var index=styleSheets.length;//获取样式表中包含的个数
if(styleSheets.insertRule){
styleSheets.insertRule("p{background-color:red;color:#fff;padding:1 em;}",index);
}else{
styleSheets.addRule("P","background-color:red;color:#fff;padding:1 em;",index);
}
var p=document.getElementsByTagName("p")[0];
if(document.defaultView && document.defaultView.getComputedStyle){//非IE
p.innerHTML="背景色："+document.defaultView.getComputedStyle(p,null).backgroundColor
+"<br>字体颜色:"+document.defaultView.getComputedStyle(p,null).color;
}else if(p.currentStyle){//IE
p.innerHTML="背景色："+p.currentStyle.backgroundColor+"<br>字体颜色："+p.currentStyle.color;
}else{
p.innerHTML="当前浏览器无法取得最终显示样式";
}
}
</script>
![CSS的伪元素和伪类的区别[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)