在链接悬停时交换 div - Firefox 中的 Javascript 错误

Question

我有一些代码可以让我将鼠标悬停在多个链接上，然后替换指定 DIV 中的内容。它适用于大多数浏览器，但 Firefox 会出现错误 - 可以通过删除页面的 doctype 代码来“修复”该错误，但显然这意味着代码存在严重问题并且不合规。

这里是 Javascript：

var description = new Array();
description[0] = "Content one";
description[1] = "Content two";
description[2] = "Content three";

每个链接看起来像这样，带有不同的数字：

<a onMouseOver="FeatureSwap.innerHTML = description[1];">

这是在将鼠标悬停在其中一个链接上时其内容发生变化的 DIV：

<div id="FeatureSwap">Default content here</div>

Firefox 抛出的错误是：

FeatureSwap is not defined

Answer 1

innerHTML 是 DOM 元素的属性，即文档对象模型。

因此，您需要首先获得对元素的访问权限。在您的情况下，该元素是 id 为 FeatureSwap 的 div。

在下面的代码中，我们首先使用大多数浏览器通用的方法通过其 ID 查找元素。然后我们设置它的 innerHTML 属性。

试试

<a onMouseOver="document.getElementById('FeatureSwap').innerHTML = description[1];">

---

仅供参考，通过删除 doctype 声明，您导致 Firefox 以"quirks mode" 而非标准兼容模式显示您的页面。 Firefox 中的notable features of quirks mode 之一是元素可以通过它们的 ID 访问，就好像它们是变量一样。如需更多信息，请参阅WHATWG spec。

Answer 2

试试：

<a onMouseOver="document.getElementById('FeatureSwap').innerHTML = description[1];">