22、利用 CSS 实现动态 HTML

利用 CSS 实现动态 HTML

1. 动态 HTML 与文档对象模型

CSS 是创建具有特殊效果动态页面的强大工具。通过文档对象模型（DOM），可以动态更改各种浏览器中的 CSS 属性。例如，有一个包含蓝色字体的 div 元素，为了让脚本能够访问该 div 及其内容，可以使用 <div> 标签的 id 属性来标识它，示例代码如下：

<div id="myID" style="color:blue">I’m blue now, but I may not be later.</div>

若要将文本颜色改为红色，在使用 Internet Explorer 4 或更高版本时，结合 DOM 和 JavaScript 实现起来很容易，代码如下：

<div id="myID" style="color:blue; cursor:hand" onclick="this.style.fontSize='60px'; this.style.color='red'">I’m blue now, but I may not be later.</div>

还有另一种修改方式，如下面的代码片段（Listing 27 - 1），创建了另一个 div 对象并为其添加了 onClick 事件处理程序，当点击新的 div 对象时，带有 myID