21、利用 CSS 实现动态 HTML

利用 CSS 实现动态 HTML

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

CSS 是创建具有特殊效果动态页面的强大工具。可以在不同浏览器中动态更改 CSS 属性。通过文档对象模型（DOM），能访问任何对象，其中包括样式对象（在 Internet Explorer 中）。

例如，有一个包含蓝色字体的 div 元素，为了让脚本能够访问该 div 及其内容，可使用 <div> 标签的 id 属性来标识它：

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

若想将文本颜色改为红色，借助 DOM 和 JavaScript 很容易实现，在 Internet Explorer 4 及以上版本中更便捷：

<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>

若将上述代码片段加载到 Internet Explorer 中，点击文本时它会发生变化。

下面是对前面代码片段的修改：