Javascript-DOM2&DOM3
一、样式
1、访问元素的样式
任何支持style 特性的HTML 元素在JavaScript 中都有一个对应的style 属性。这个style 对象是CSSStyleDeclaration 的实例，包含着通过HTML 的style 特性指定的所有样式信息，但不包含与外部样式表或嵌入样式表经层叠而来的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div{
color:orange;
}
</style>
</head>
<body>
<div id="box" style="width:100px">
212
</div>
<script>
var oBox = document.getElementById("box");
// alert(oBox.style.color);
oBox.style.backgroundColor = "red";
oBox.style.width = "200px";
oBox.style.height = "300px";
oBox.style.border = "1px solid black";
</script>
</body>
</html>
2、DOM样式的属性和方法
“DOM2级样式”规范还为style 对象定义了一些属性和方法。这些属性和方法在提供元素的style特性值的同时，也可以修改样式。下面列出了这些属性和方法。
cssText：如前所述，通过它能够访问到style 特性中的CSS 代码。
•length：应用给元素的CSS 属性的数量。
•parentRule：表示CSS 信息的CSSRule 对象。本节后面将讨论CSSRule 类型。
•getPropertyCSSValue(propertyName)：返回包含给定属性值的CSSValue 对象。
•getPropertyPriority(propertyName)：如果给定的属性使用了!important 设置，则返回"important"；否则，返回空字符串。
•getPropertyValue(propertyName)：返回给定属性的字符串值。
•item(index)：返回给定位置的CSS 属性的名称。
•removeProperty(propertyName)：从样式中删除给定属性。
•setProperty(propertyName,value,priority)：将给定属性设置为相应的值，并加上优先权标志（"important"或者一个空字符串）。
3、计算的样式
虽然style 对象能够提供支持style 特性的任何元素的样式信息，但它不包含那些从其他样式表层叠而来并影响到当前元素的样式信息。“DOM2 级样式”增强了document.defaultView，提供了getComputedStyle()方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#myDiv{
background-color:blue;
width:100px;
height:200px;
}
</style>
</head>
<body>
<div id="myDiv" style="backround-color:red; border:1px solid black;"></div>
<script>
var oDiv = document.getElementById("myDiv");
var computedStyle = document.defaultView.getComputedStyle(myDiv, null);
alert(computedStyle.backgroundColor);
alert(computedStyle.width);
alert(computedStyle.height);
alert(computedStyle.border);
</script>
</body>
</html>
currentStyleIE中支持
