Javascript高级编程学习笔记（50）—— DOM2和DOM3（2）样式

样式

在HTML中定义元素的方式有以下三种：

1.link标签引入外部样式表

2.style标签定义嵌入样式

3.通过JS中对style特性定义元素样式（行内样式）

“DOM2级样式”围绕上述样式机制提供了一套API

若需要检测CSS2是否可用可以使用以下代码（虽然现在应该是用不着，毕竟CSS4都快普及了emmm）

var supportsDOM2CSS = document.implementation.hasFeature("CSS","2.0");
var suportsDOM2CSS2 = document.implementation.hasFeature("CSS2","2.0");

访问元素样式

任何支持style特性的元素，在JS中都有一个对应的style特性

该style属性是 CSSStyleDeclaration 的实例

但是该属性只包含通过style特性设置的样式信息（行内样式），但不包括外部样式表与层叠样式表引入的样式

至于JS中的style属性，一般来说只需要将其原本短横线的形式改写为驼峰命名即可在JS中对其进行访问

如下所示

background-image　　　　style.backgroundImage

color　　　　　　　　　　style.color

但是还有一些样式不能通过上面这样简单的转换来获取

比如 float 样式，由于 float 在CSS中属于保留字所以不能用作属性名

而在JS中设置、访问float则需要使用 cssFloat 在IE中则需要使用 styleFloat

有了DOM2对样式API的支持，我们只需要取得一个有效的DOM元素引用，就可以通过JS代码来设置元素的样式

在通过JS修改元素的外观时元素的外观会自动刷新

PS.如果没有为元素设置style特性，那么style对象中则会包含一些默认的值，但是这些默认值并不能准确地反映当前元素的准确信息

DOM样式属性和方法

DOM2为style对象提供了以下属性和方法：

cssText：可以访问到style特性（行内样式）中的CSS代码

length：应用给当前元素的CSS属性数量

parentRule：表示CSS信息的CSSRule对象

getPropertyValue（属性名）：返回包含给定属性值的CSSValue对象

getPropertyPriority（属性名）：若该属性使用了 ！important 则返回 "important" 否则返回空字符串

getPropertyName（属性名）：返回指定属性的字符串

item（下标）：返回指定位置的CSS属性名称

removeProperty（属性名）：从样式中删除给定属性

setProperty（属性名，属性值，优先级）：设置属性，优先级传入”important“或空字符串

PS.以上属性中对CSSText的重写将会覆盖原来style特性的值

计算的样式

之前我们提到了，style对象的属性都只包含style特性的值，也就是行内样式

这样可以让我们JS代码对元素样式的修改以较高的优先级覆盖掉外部样式和嵌入样式的影响

但是这样为我们获取元素的样式带来了困难，所以DOM2增强了document.defaultView，新增了getComputedStyle方法用于获取元素的准确样式

getComputedStyle方法传入两个参数：1、要取得样式的元素 2、伪元素字符串（如":after"，若不需要伪元素信息则可以传入null）

该方法返回一个 CSSStyleDeclaration对象

该对象包含当前元素所有计算后的样式，也就是呈现在页面上的样式信息

PS.虽然大多数浏览器都支持但是不同浏览器表示值的方式可能有所出入，所以在使用时需要注意

IE中不支持该方法，但是通过 currentStyle属性提供了相同功能的实现

最后要记住的是：不论在哪个浏览器中，计算后的样式都是只读的，不能对其进行修改来改变元素最终的样式呈现