首页 > 代码库 > 使用Dom操纵样式表
使用Dom操纵样式表
XHTML中的每个元素对象都有一个属性对象style，该对象包含了元素的所有CSS样式。对于每个CSS样式，style对象都有相关的属性与之对应，只是格式有所不同：对单个词的CSS样式，style对象用相同的属性名对应（CSS中的color对应style.color）；对于两个词的样式，style对象用去掉两个词之间的连接线，并且第二个词的首字母大些的属性名对应（CSS中的background_color样式对应style.backgroundColor）。
下面是几个常用的CSS样式和style属性的对应表：
CSS样式 Style对象属性
background_color style.backgoundColor
color style.color
font style.font
font-family style.fontFamily
font-weight style.fontWeight
当属性名有2个单词以上时就要使用驼峰命名。
如将一个id="div1"的CSS边框属性更改为"1px solid red",背景色改为green：
var oDiv = document.getElementByIdx_xx_x("div1");
oDiv.style.border = "1px solid red";
oDiv.style.backgroundColor = green;
DOM为style提供了几种方法：
1. getPropertyValue(propertyName) -- 返回CSS属性的属性值的字符串值。
2. getPropertyPriority() -- 如果CSS属性规则指定了"！import",则返回字符串 "!import",否则返回空字符串。
3. item(index) -- 返回指定索引的CSS属性名称。
4. removeProperty(propertyName) -- 从CSS定义中删除propertyName。
5. setProperty(propertyName,value,priority) -- 设置CSS属性propertyName为value 以及给定的优先级。
操作外部样式表及style元素中的样式
DOM指定了一个样式表对象，该对象如下属性：
1. disabled -- 指示样式表是否disabled；
2. href -- 外部样式表的URL；
3. media -- 在media属性中指定的可以使用样式表的媒体类型列表；
4. ownerNode -- 指定样式表的DOM节点（或元素）；
5. parentStyleSheet -- 如果样式表被包含在CSS@import语句中，本属性指向语句 发现的样式；
6. title -- 通过HTML的title属性指定的样式列表；
7. type -- 样式表的mime类型。
访问DOM浏览器样式表规则使用cssRules集合；访问IE样式规则使用rules集合。
如判断使用哪个集合名：
var oCss = document.styleSheets[0].cssRules || document.styleSheets[0].rules;
最终样式表：
最终在屏幕中显示的样式被成为最终的样式。是终显示样式由内联样式和CSS规则共同组成；IE和DOM具有不同的处理方式。
IE：
在每个元素上提供currentStyle对象；
可以用currentStyle得到内部样式和外部样式规则属性；
currentStyle是只读属性；
alert(div1.currentStyle.backgroundColor);
DOM：
document.defaultView.getComputedStyle(div,null).backgroundColor；
IE浏览器直接通过元素的currentStyle属性获取当前样式，而DOM需要调用document.defaultView的getComputedStyle方法获取，该方法带两个参数，第一个参数是需要获取当前样式的元素对象，第二个参数是伪元素，如：hover或：first-letter,如果不需要，第二个参数可以不用输入，直接是null。
获取到当前样式对象后，就可以直接获取样式的所有属性的值。值得注意的是，当前样式的属性值只读，也就是说只能获取，不能修改
使用Dom操纵样式表