JavaScript--14 DOM 元素大小和元素遍历（NodeIterator、TreeWalker ）

一、元素样式

style 属性

任何支持style特性的HTML元素在JavaScript中都有一个对应的style属性。这个style对象包含着通过 HTML的style 特性指定的所有样式信息，但不包含与外部样式表或嵌入样式表经层叠而来的样式。在style特性中指定的任何 CSS属性都将表现为这个style对象的相应属性。对于使用短划线（分隔不同的词汇，例如 background-image）的CSS 属性名，必须将其转换成驼峰大小写形式，才能通过JavaScript来访问。
多数情况下，都可以通过简单地转换属性名的格式来实现转换。其中一个不能直接转换的CSS属性就是 float。由于float是 JavaScript中的保留字，因此不能用作属性名。规定样式对象上相应的属性名应该是 cssFloat；Firefox、Safari、Opera和 Chrome都支持这个属性，而 IE支持的则是styleFloat。

示例：

var myDiv = document.getElementById("myDiv"); 

//设置背景颜色
myDiv.style.backgroundColor = "red"; 

//改变大小
myDiv.style.width = "100px"; 
myDiv.style.height = "200px"; 

//指定边框
myDiv.style.border = "1px solid black";

DOM 样式属性和方法

length：应用给元素的CSS属性的数量。
getPropertyValue(propertyName)：返回 style 中给定属性的字符串值。
getPropertyCSSValue(propertyName)：它返回一个包含两个属性的CSSValue 对象，这两个属性分别是：cssText和cssValueType。其中，cssText 属性的值与getPropertyValue()返回的值相同，而 cssValueType属性则是一个数值常量，表示值的类型：0 表示继承的值，1 表示基本的值，2 表示值列表，3 表示自定义的值。
removeProperty(propertyName)：从样式中删除给定属性，使用这个方法移除一个属性，意味着将会为该属性应用默认的样式（从其他样式表经层叠而来），可以用来查看属性的默认值。
cssText：通过它能够访问到style 特性中的CSS代码,在写入模式下，赋给 cssText的值会重写整个style 属性的值。设置cssText是为元素应用多项变化最快捷的方式，因为可以一次性地应用所有变化。
item(index)：返回给定位置的CSS 属性的名称。也可以使用方括号语法：myDiv.style[i]; //或者myDiv.style.item(i)
遍历style样式的例子：

var prop, value, i, len;
for (i=0, len=myDiv.style.length; i < len; i++){
   
	prop = myDiv.style[i]; //或者 myDiv.style.item(i)
	value = myDiv.style.getPropertyValue(prop);
	console.log(prop + " : " + value);
}

计算的样式

虽然style对象能够提供style 特性的样式信息，但它不包含那些从其他样式表层叠而来并影响到当前元素的样式信息。“DOM2 级样式”增强了document.defaultView，提供了getComputedStyle()方法。这个方法接受两个参数：要取得计算样式的元素和一个伪元素字符串（例如":after"）。如果不需要伪元素信息，第二个参数可以是null。获取了最终呈现的样式：

查询示例：

var myDiv = document.getElementById("myDiv");
var computedStyle = document.defaultView.getComputedStyle(myDiv, null);
alert(computedStyle.backgroundColor); 

// IE 不支持 getComputedStyle()方法，但它有一种类似的概念
// 在IE 中，每个具有style 属性的元素还有一个currentStyle 属性
var myDiv <