Ajax实战：为文档增加样式

Ajax实战：为文档增加样式2011-09-06希赛网到目前为止，我们已经考察了使用DOM来操作文档的结构（一个元素如何被另外一个元素所包含，诸如此类）。这使得我们可以有效地改造在静态HTML中声明的结构。DOM还提供了另外一类方法，允许以编程方式修改元素的样式和改造定义在样式表中的结构。

通过DOM操作，Web页面上的每一个元素都可以拥有多种视觉样式，例如位置、高度和宽度、颜色、边框和空白。尽管分别修改每一个属性可以更加精细地控制元素的外观，但是这样做是很单调乏味的。幸运的是，Web浏览器为我们所提供的JavaScript绑定除了提供底层接口以便精确操作之外，也允许通过CSS类来为元素设置一致的样式。我们来逐个考察一下。

1. className属性

CSS提供了一种简明的方式来将预先定义的、可重用的样式应用到文档中。当我们为在代码中创建的元素设置样式的时候，也可以通过设置DOM节点的 className属性来利用CSS。例如，下面一行为一个节点设置了通过declared类定义的显示规则：

hello.className="declared";

其中hello是到一个DOM节点的引用。这提供了一种容易和紧凑的方法，来为一个节点同时分配很多的CSS规则，并且可以通过样式表来管理复杂的样式。

2. style属性

在其他一些情况下，我们想要细粒度地改变特定元素的样式，也许仅仅是作为已经通过CSS应用的样式的补充。

DOM节点还包含了一个名为style的关联数组，其中包含了节点样式的全部细节。正如图2-4所示，DOM节点的样式中通常包含有大量的条目。鲜为人知的是，为节点分配className也会改变style数组的值。

图2-4 在DOM检查器中检查DOM节点的style属性。大部分的值都不是由用户显式设置的，而是由呈现引擎自己设置的。注意旁边的滚动条：我们只看到了全部已计算样式列表的大约四分之一的内容。

style数组也可以直接操作。在为empty节点中的条目设置样式后，我们可以给它加一个边框：

empty.style.border="solid green 2px";

empty.style.width="200px";

我们也可以很容易地仅仅声明一个box类，然后通过修改className属性来应用样式，但是这种方法在某些特定环境下用起来更加便捷，并且它还允许以编程方式构造字符串。例如，我们想要以像素的精度自由地改变元素的大小，如果为此预先定义从1到800像素每个宽度的样式，那显然是低效和笨拙的。

使用上面的方法，我们可以创建新的DOM元素，并且为它们设置样式。在内容处理技术的工具箱中，还有另外一个很有用的工具，它使用一种略微不同的方法来通过程序编写Web页面，这就是InnerHTML属性，我们通过考察这个属性来结束本节。