JavaScript总结（六）

使用DOM操纵样式表

✍ 操纵元素的Style样式属性（所有的均对于CSS的内联式）

对于每个CSS样式，Style对象都包含了一个相对应的属性，只需要用到style属性即可；

Div.style.color= "red"; //给div元素设置字体颜色为红色

对于两个词的样式，在JavaScript样式属性的格式去驼峰命名法；

 Div.style.backgroundColor= "#000"; //给div元素设置背景色为黑色

DOM为style对象提供了方法用来与CSS样式定义的单个部分交互

➣ getPropertyValue(propertyName)——返回CSS属性的属性值的字符串。这个propertyName必须是CSS样式中指定的格式；

➣ getPropertyPriority()——如果再CSS属性规则中指定了"!important"，则返回字符串"!important"，否则返回一个空的字符串；

➣ item(index)——返回指定索引的CSS属性名称;

➣ removeProperty(propertyName)——从CSS定义中删除propertyName。

➣ setProperty(propertyName,value,prioriry)——设置CSS属性propertyName为value以及给定的优先级("important"或者一根空字符串);

✍ 操纵外部样式表以及style元素中的样式

使用document.styleSheets集合,该集合包含了在一个网页所有样式表的应用,也包括所有的style属性。

➣ disabled——表示样式表是否被禁用的布尔值。这个属性是可读/写的，将这个值设置为true可以禁用样式表；

➣ href——如果样式表是通过<link>包含的，则是样式表的URL；否则，是null；

➣ media——当前样式表支持的所有媒体类型的集合。与所有DOM集合一样，这个集合也有一个length属性和一个item()方法。也可以使用方括号语法取得结合中 特定的项。如果集合是空列表项，表示样式表适用于所有媒体。在IE中，media是一个反映<link>和<style>元素 media特性的字符串；

➣ ownerNode——指定样式表的DOM节点(<link/>或者<style/>元素)。如果当前样式表是其它样式表通过@import导入的，则这个属性值为null。IE不支持这个属性；

➣ parentStyleSheet——如果样式表被包含在CSS@import语句中，本属性指向语句发现的样式；

➣ title——ownerNode中的title属性的值；

➣ type——样式表的mine类型。对CSS样式表而言，通常是“type/css”；

（PS：一条规则上的style对象不是只读的，我们可以更改它。但是更改一条CSS规则会影响页面上所有使用规则的元素）

✍ 操纵最终样式

一个元素可能有多个样式作用于其上，最终在屏幕上显示的样式，我们称为最终样式。最终样式由所有的样式信息（包含内联样式和CSS规则）组成，用来真实指示元素在屏幕是如何显示的（存在兼容性问题，IE和DOM有不同的实现方式）；

➣ IE中的最终样式

IE在每个元素上提供了一个currentStyle对象，该对象包含了从元素背景色到任何相关CSS规则的style对象的所有属性。currentStyle对象与style工作方式相同，有同样的属性和方法。

➣ DOM中的最终样式

DOM对于给定的元素提供了一个方法getComputedStyle()来创建一个类似style的对象，例如:hover或者:first-letter（如果不需要，第二个参数可为空）。该方法接收两个参数，一个是要获取样式的元素，一个是伪元素，我们可以从document.defaultView对象访问该方法（IE和Safari浏览器不支持document.defaultView）。

➣ 获取IE和DOM的最终样式(已解决兼容性问题)

var obj = document.getElementById("test");
var style = null;
if (window.getComputedStyle) {
    style = window.getComputedStyle(obj, null);    // DOM
} else {
    style = obj.currentStyle;  // IE
}