使用 JavaScript 动态更改内容

引言

我最喜欢 JavaScript 的用法之一，或者更具体地说，DHTML 的用法之一，就是动态地更改内容。只需几行脚本，我就可以摆脱缓慢下载的 Java 和 Flash，甚至可以在页面加载后更改文本。我编写本教程的前提是，你至少具备一些 JavaScript 的工作知识。

更改文本需要 3 种不同的技术，具体取决于浏览器。如果你和我一样，更喜欢 Internet Explorer 5，但重要的是，总有人使用其他浏览器，所以我们必须解决所有这些问题。

详细说明

让我首先介绍一个简单的文本，我将基于此文本来解释如何更改文本

<div ID="testing">MSNBC.com</div>

在 Internet Explorer 4 或更高版本中，更改上述文本的脚本是

document.all.testing.innerHTML = "A very cool site!"

我访问文本的 ID，这告诉脚本我想要更改哪个文本。然后我使用 innerHTML 属性，它允许我将此文本更改为另一个文本。

在 Netscape 6 中，更改文本的想法非常相似，只是在确切的语法上有所不同

document.getElementById("testing").innerHTML = "A very cool site!"

值得注意的是，Internet Explorer 5 也支持这种更改文本的方法。如果你不关心 IE4，那么这行代码足以涵盖 IE5 和 NS6。

最后，我们遇到了令人头疼的 Netscape 4，令人惊讶的是，它仍然比 NS6 更受欢迎。要在此浏览器中更改文本，我必须实际使用一组不同的标签（来自 DIV）嵌入文本。所需的标签是

<ilayer name="testing"><layer name="testing2">MSNBC.com</layer></ilayer>

设置好正确的标签后，我可以使用以下方法在 Netscape 4 中更改其文本

document.testing.document.test2.document.write("A very cool site!")
document.testing.document.test2.document.close()

哎呀！是的，它相当混乱，但这是通往 NS4 之心的唯一途径！

结论

通过动态更改文本，可以创建许多有趣且有用的应用程序。我可以创建一个每隔几秒钟更改消息的消息滚动器，一个当我将鼠标悬停在其上时更改的文本，甚至带有相应描述的图像幻灯片。

如果你正在寻找动态更改文本的实际示例，一个好的起点是 Dynamic Drive。好了，到此为止。如果你对新的教程有任何建议，请访问我的网站。