javascript基础从小白到高手系列一百二十五：DOM 样式属性和方法

DOM2 Style 规范也在style 对象上定义了一些属性和方法。这些属性和方法提供了元素style 属
性的信息并支持修改，列举如下。
 cssText，包含style 属性中的CSS 代码。
 length，应用给元素的CSS 属性数量。
 parentRule，表示CSS 信息的CSSRule 对象（下一节会讨论CSSRule 类型）。
 getPropertyCSSValue(propertyName)，返回包含CSS 属性propertyName 值的CSSValue
对象（已废弃）。
 getPropertyPriority(propertyName)，如果CSS 属性propertyName 使用了!important
则返回"important"，否则返回空字符串。
 getPropertyValue(propertyName)，返回属性propertyName 的字符串值。
 item(index)，返回索引为index 的CSS 属性名。
 removeProperty(propertyName)，从样式中删除CSS 属性propertyName。
 setProperty(propertyName, value, priority)，设置CSS 属性propertyName 的值为
value，priority 是"important"或空字符串。
通过cssText 属性可以存取样式的CSS 代码。在读模式下，cssText 返回style 属性CSS 代码
在浏览器内部的表示。在写模式下，给cssText 赋值会重写整个style 属性的值，意味着之前通过
style 属性设置的属性都会丢失。比如，如果一个元素通过style 属性设置了边框，而赋给cssText
属性的值不包含边框，则元素的边框会消失。下面的例子演示了cssText 的使用：
myDiv.style.cssText = “width: 25px; height: 100px; background-color: green”;
console.log(myDiv.style.cssText);
设置cssText 是一次性修改元素多个样式最快捷的方式，因为所有变化会同时生效。
length 属性是跟item()方法一起配套迭代CSS 属性用的。此时，style 对象实际上变成了一个
集合，也可以用中括号代替item()取得相应位置的CSS 属性名，如下所示：
for (let i = 0, len = myDiv.style.length; i < len; i++) {
console.log(myDiv.style[i]); // 或者用myDiv.style.item(i)
}
使用中括号或者item()都可以取得相应位置的CSS 属性名（“background-color”，不是
“backgroundColor”）。这个属性名可以传给getPropertyValue()以取得属性的值，如下面的例子
所示：
let 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});
}
getPropertyValue()方法返回CSS 属性值的字符串表示。如果需要更多信息，则可以通过
getPropertyCSSValue()获取CSSValue 对象。这个对象有两个属性：cssText 和cssValueType。
前者的值与getPropertyValue()方法返回的值一样；后者是一个数值常量，表示当前值的类型（0
代表继承的值，1 代表原始值，2 代表列表，3 代表自定义值）。①下面的代码演示了如何输出CSS 属性
值和值类型：
let prop, value, i, len;
for (i = 0, len = myDiv.style.length; i < len; i++) {
prop = myDiv.style[i]; // alternately, myDiv.style.item(i)
value = myDiv.style.getPropertyCSSValue(prop);
console.log(prop: ${value.cssText} (${value.cssValueType}));
}
removeProperty()方法用于从元素样式中删除指定的CSS 属性。使用这个方法删除属性意味着会
应用该属性的默认（从其他样式表层叠继承的）样式。例如，可以像下面这样删除style 属性中设置
的border 样式：
myDiv.style.removeProperty(“border”);
在不确定给定CSS 属性的默认值是什么的时候，可以使用这个方法。只要从style 属性中删除，
就可以使用默认值。