通过javascript访问外部CSS样式表

javascript. 访问外部的CSS样式表：
通常我们定义CSS样式表有三种方式：一、内部定义；二、外部定义；三、内外部结合。
一、对于内部样式的访问与修改，我们可以直接通过使用style对象就可以实现对内部样式表的访问与修改
我们可以通过一个简单的例子来说明：

中间的内容我们在这里省略

演示代码如下：

//一、通过dom中的getElementById()获取到应用的html元素
var mydiv=documet.getElementById("div1");
//二、访问该元素的style对象，再访问该对象中的属性，也可以修改属性的值
//我们可以直接修改style中的width
mydiv.style.width=990px;
//我们也可以获取到style中的属性值，例如获得background-color
//在这里我们要特别注意是通过backgroundColor获取的而不是通过background-color来获取的
alert(mydiv.style.backgroundColor);

二、对于外部样式的访问与修改，我们就不能通过上面的方式来访问到CSS样式表了，我们要通过document中的styleSheets集合来实现这个目的，
这个集合包含HTML页面中所有的样式表，DOM为每个样式表定义了一个cssRules的集合，这个集合中包含定义在样式表中的所有CSS规则，这里要
注意的就是在Mozilla和Safasi中是cssRules而在IE中是使用的rules。
我们也可以通过一个简单的例子来说明：
首先我们定义一个外部的样式文件(文件名.css)
for example:
.div1{
 width:800px;
 height:900px;
 background-color；red;
}
访问外部CSS

//这里需要注意的就是styleSheets[0]这里的0代表的是哪个css文件
 var myRules=document.styleSheets[0].rules;
//对于得到的myRules若有多个class用于选择哪个class样式我们可以通过如下方式取得对于的class样式
var backcolor=myRules["div1"].style.backgroundColor;
//也可以设置值，若我们想修改背景颜色
myRules["div1"].style.backgroundColor="black";

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/26480336/viewspace-722454/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/26480336/viewspace-722454/