2019-01-02

第12章 DOM2和DOM3

12.2 样式

12.2.1 访问元素的样式

在style特性中指定的任何CSS属性都将表现为这个style对象的相应属性。对于短浅线的css属性名，必须将其转换成驼峰大小写形式，才能通过Javascript来访问。

css属性	Javascript属性
background-image	style.backgroundImage
color	style.color
display	style.display
font-family	style.fontFamily

多数情况下都可以通过简单的转换属性名的格式来实现转换。其中不能直接转换的css属性就是float。
由于float是javascript中的保留字，因此不能用作属性名。
“DOM2级样式”规范规定样式对象上相应的属性名应该是cssFloat；Firefox、Safari、Opera和Chrome都支持这个属性，而IE支持的则是styleFloat。

取得一个有效的DOM元素的引用，使用Javascript为其设置样式：

var myDiv = document.getElementById('myDiv ');
//设置背景颜色
myDiv.style.backgroundColor='red';
//改变大小
myDiv.style.width="100px";
myDiv.style.height="200px";
//设置边框
myDiv.style.border="1px solid black";

在标准模式下，所有度量值都必须指定一个度量单位。在混杂模式下，可以将style.width设置为"20",浏览器会假设它是"20px";但在标准模式下，将style.width设置为"20"会导致被忽略——因为没有度量单位。所以在实践中，最好始终都指定度量单位。

通过style对象同样可以取得style特性中指定的样式：

 

alert(myDiv.style.backgroundColor);
alert(myDiv.style.width);
alert(myDiv.style.height);

如果没有为元素设置style特性，那么style对象中可能会包含一些默认的值，但这些值并不能准确的反应该元素的样式信息。

1、DOM样式属性和方法
"DOM2级样式"规范还为style对象定义了一些属性和方法。这些属性和方法在提供元素的style特性值的同事，也可以修改样式：
◆ cssText：通过它能访问到style特性中的css代码
◆ length：应用给元素的css属性的数量
◆ parentRule：表示css信息的cssRule对象
◆ getPropertyCSSValue：返回包含给定属性值的CSSValue对象
◆ getPropertyPriority：如果给定的属性使用了！important设置，则返回“important”；否则返回空字符串
◆ getPropertyValue：返回给定属性的字符串值
◆ item(index)：返回给定位置的css属性的名称
◆ removeProperty：从样式中删除给定属性
◆ setProperty：将给定属性设置为相应的值，并加上优先权标志

通过cssText属性可以访问style特性中的CSS代码。在写入模式下，赋给cssText的值会重写整个style特性的值。

myDiv.style.cssText="width:25px;height:100px;background-color:green";
alert(myDiv.style.cssText);

设置cssText是为元素应用多项变化最快捷的方法，可以一次性的应用所有变化

设置length属性的目的就是将其与item（）方法配套使用，以便迭代在元素中定义的css属性。在使用length和item（）时，style对象实际上就相当于一个集合，都可以使用方括号语法来代替item（）来取得给定位置的css属性：

for(var i=0,len=myDiv.style.length;i

getPropertyValue()方法取得的始终都是css属性值的字符串表示。
如果需要更多信息，可以使用getPropertyCSSValue（）方法，它返回一个包含两个属性的CSSValue对象：
1、cssText：值与getPropertyValue（）返回的值相同
2、cssValueType：是一个数值敞亮，表示值的类型：0表示继承的值，1表示基本的值，2表示值列表，3表示自定义的值。

在实际开发中，getPropertyCSSValue使用的比getPropertyValue少的多。