Javascript-15-DOM-2

样式

在HTML中定义样式的方式有3种：

• 通过<link/>元素包含外部样式表文件。
• 使用<style/>元素定义嵌入式样式。
• 使用style特性定义针对特定元素的样式。

访问元素的样式

任何支持style特性的HTML元素在Javascript中都有一个对应的style属性。这个style对象是CSSStyleDeclaration的实例，包含着通过HTML的style特性指定的所有样式信息，但不包含与外部样式表或嵌入样式表经层叠而来的样式。在style特性中指定的任何CSS属性都将表现为这个style对象的相应属性。对于使用短划线(分割不同词汇，例如background-image)的CSS属性名，必须将其转换成驼峰大小写形式，才能通过Javascript来访问。

多数情况下，都可以通过简单地转换属性名的格式来实现转换。其中一个不能直接转换的CSS属性就是float。由于float是JavaScript的保留字，因此不能用作属性名。

DOM样式属性和方法

• cssText：如前所述，通过它能够访问到style特性中的CSS代码。
• length：应用给元素的CSS属性的数量。
• parentRule：表示CSS信息的CSSRule对象。
• getPropertyCSSValue(propertyName)：返回包含给定属性值的CSSValue类型。
• getPropertyPriority(propertyName)：如果给定的属性使用了！important设置，则返回“important”；否则，则返回空字符串。
• getPropertyValue(propertyName)：返回给定属性的字符串值。
• item(index)：返回给定位置的CSS属性的名称。
• removeProperty(propertyName)：从样式中删除给定属性。
• setProperty(propertyName, value, priority)：将给定属性设置为相应的值，并加上优先权标志("important"或者一个空字符串)。

通过cssText属性可以访问style特性中的CSS代码。在读取模式下，cssText的值会重写整个styl特性的值；也就是说，以前通过style特性指定的样式信息都将丢失。

计算的样式

getComputedStyle()方法接受两个参数：要取得计算样式的元素和一个伪元素字符串。如果不需要伪元素信息，第二个参数可以是null。该方法返回一个CSSStyleDeclaration对象(与style属性的类型相同)，其中包含当前元素的所有计算的样式。

无论在哪个浏览器中，最重要的一条是要记住所有计算的样式都是只读的；不能修改计算后样式对象中的CSS属性。此外，计算后的样式也包含属于浏览器内部样式表的样式信息，因此任何具有默认值的CSS属性都会表现在计算后的样式中。

操作样式表

CSSStyleSheet类型表示的是样式表，包括通过<link>元素包含的样式表和在<style>元素中定义的样式表。它只表示样式表，而不管这些样式表在HTML中是如何定义的。

CSSStyleSheet继承自StyleSheet，后者可以作为一个基础接口来定义非CSS样式表。从StyleSheet接口继承而来的属性如下：

• disabled：表示样式表是否被禁用的布尔值。这个属性是可读/写的，将这个值设置为true可以禁用样式表。
• href：如果样式表是通过<link>包含的，则是样式表的URL，否则是null；
• media：当前样式表支持的所有媒体类型的集合。与所有DOM集合一样，这个集合也有一个length属性和一个item()方法。也可以使用方括号语法取得集合中特定的项。如果集合是空列表，表示样式表适用于所有媒体。
• ownerNode：指向拥有当前样式表的节点的指针，样式表可能是在HTML中通过<link>或<style>引入的(在XML中可能使用过处理指令引入的)。如果当前样式表是其他样式表通过@import导入的，则这个属性为null。IE不支持这个属性。
• parentStyleSheet：在当前样式表是通过@import导入的情况下，这个属性是一个指向导入它的样式表的指针。
• title：ownerNode中title属性的值。
• type：表示样式表类型的字符串。对CSS样式表而言，这个字符串是“type/css”。
  除了disabled属性之外，其他属性都是只读的。在支持以上所有这些属性的基础上，CSSStyleSheet类型还支持下列属性和方法：
• cssRules：样式表中包含的样式规则的集合。IE不支持这个属性，但有一个类似的rules属性。
• ownerRule：如果样式表是通过@import导入的，这个属性就是一个指针，指向表示导入的规则，否则，值为null。IE不支持这个属性。
• deleteRule(index)：删除cssRules集合中指定位置的规则。IE不支持这个方法，但支持一个类似的removeRule()方法。
• insertRule(rule，index)：向cssRules中指定的位置插入rule字符串。IE不支持这个方法，但支持一个类似的addRule()方法。

应用与文档的所有样式表是通过document.styleSheets集合来表示的。通过这个集合的length属性可以获知文档中样式表的数量，而通过方括号语法或item()方法可以访问每一个样式表。

元素大小

偏移量

偏移量(offset dimension)，包括元素在屏幕上占用的所有可见的空间。元素的可见大小由其高度、宽度决定，包括所有内边距、滚动条、边框大小(不包括外边距)。通过下列4个属性可以取得元素的偏移量：

• offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、(可见的)水瓶滚动条的高度、上边框高度和下边框高度。
• offsetWidth：元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、(可见的)垂直滚动条的宽度、左边框宽度和右边框宽度。
• offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离。
• offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离。

客户区大小

元素的客户区大小(client dimension)指的是元素内容及其内边距所占据的空间大小。

• clientWidth：元素内容区宽度加上左右内边距宽度。
• clientHeight：元素内容区高度加上上下内边距高度。

滚动大小

滚动大小(scroll dimension)，指的是包含滚动内容的元素的大小。以下4个与滚动大小相关的属性：

• scrollHeight：在没有滚动条的情况下，元素内容的总高度。
• scrollWidth：在没有滚动条的情况下，元素内容的总宽度。
• scrollLeft：被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。
• scrollTop：被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。

确定元素大小

getBoundingClientRect()方法，该方法返回一个矩形对象，包含4个属性：left、top、right、bottom。