JS-如何使用DOM操纵样式表

下面是几个常用的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。

1. 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属性指定的样式列表；

1. 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；

---

获取到当前样式对象后，就可以直接获取样式的所有属性的值。值得注意的是，当前样式的属性值只读，也就是说只能获取，不能修改

---

对于有多个定义的style样式
document.syleSheets 获得HTML中所有的外部样式集合
DOM: document.styleSheet [ style样式的索引] .cssRules
IE: document.styleSheet [ style样式的索引] .rules
获得对应索引的样式表
var x = document.styleSheet [ style样式的索引] .cssRules ||
document.styleSheet [ style样式的索引] .rules
对该样式表的style属性操作
x [ 样式表中的style属性对应的索引 ].style.backgrongdColor

styleSheet [ style样式的索引]

---

这里是一个解决兼容问题获取最终样式的代码示例：

function getStyle(obj,attr){

return obj.currentStyle?
obj.currentStyle[attr]:getComputedStyle(obj[attr];
}

var div = document.getElementsByTagName('div')[0];
alert(getStyle(div,'width'));