用DOM实现Web页面样式的变化

第四步

选择和实现一些用于切换样式的机制。这常常会是一个屏幕事件，用来表明从一个事件到另一个事件进展的情况，例如当鼠标指针经过某个元素（作为将其高亮度显示的一种方式，例如弹出式菜单上项目的显示方式）的时候，或者当元素被点击而生成一个表格或者扩展查看表等等的时候。你会把样式变化函数捆绑到这种机制上。

第五步

现在，利用DOM把你希望更改样式的所有元素捆绑到一起。下面就是你应该做的。对于你想要包括在样式转换里的元素，你可以选择多种方法来对其进行标记。要记住，像<CENTER>和<DIV>这样的HTML元素会创建相关项目的块，而你可以用这些块来分配样式或者类。Listing B里就是一个例子。

在需要的时候，你可以通过多个DOM函数来参照下面这函数，包括：getElementsByClassName，getElementsByTagName和getElementsByID（这些函数也非常适合于客户端列表的排序）。如果希望的话，你可以声明一个表格，并用你希望集中成一组的元素来填充它（你可以用任何自己喜欢的方式来创建这个表格）。

但是如果你真的在寻求简单性的话就不需要这样做了。

第六步

现在剩下要做的就是调用样式的变化了。控制这个的开关通常会在你的脚本里定义（尽管这不是必须的）。如果你喜欢的话，可以创建一个样式变化函数。或者你可以把变化绑定到一个事件上，就比如用鼠标指针在元素上方划过这样很无趣的事；也就是说，就像上面那样，在<DIV>元素下面的屏幕项目之间设置一个匹配标签，然后触发一个事件——例如onMouseOver——那么你的悬浮伪类（hover pseudostyle）就会被应用。

当然还有别的方式。例如，如果选择通过脚本来实现样式的变化，那么你可以创建一个函数——比如说changeMyStyle( )——并把具体样式（用来标记你的变化组）改成与它们相反的元素。

你希望避免一开始就使用代码的理由是，这样的话你就不必编写元素专用的代码来完成这一工作——因为这很难维护，不是吗？那么，有了DOM，你可以加载任何东西，只要它们是用上面提到的那些函数（getElementsByTagName等等）标记的，然后编写一个循环来处理所有的元素，就可以把它们从你设定的第一个样式值切换到其它可选的值，而不需要为任何元素编写代码。

到了现在这个时候，你已经进入了发挥自己创造力和才智的世界。要记住，使用DOM的特性进行这种类型的页面手术的全部意义在于让下一个处理代码的人的编程生活更加轻松，在于提高档案的效率，而最重要的是，简化、简化、再简化。

责任编辑：李宁

欢迎评论或投稿