Firefox JavaScript 错误“未定义”（div Id）。控制台中的样式

Question

我正在使用 JavaScript 调整页面元素的大小和位置以适应浏览器窗口。 我的代码在 Chrome、Safari 和Internet Explorer 9 中完美运行，但在 Firefox 中会中断。 控制台给了我两个错误： "TypeError: sidebar.style is undefined"和"TypeError: content.style is undefined" 。

我当然有两个 Id 名为“侧边栏”和“内容”的 div，并且我在 CSS 中成功地使用了这两个 Id。 它们以什么方式可以是未定义的？

更令人困惑的是，该脚本的副本在站点的另一个页面上使用，但具有特定于该页面的另一个 Id。 它没有问题。 什么可能导致这个问题？

Answer 1

您没有显示您的代码，但考虑到您的问题的措辞和带有“(div Id).style in console”的标题，我怀疑您正试图通过使用 id 直接在 JavaScript 中简单地引用元素，就好像它们一样是变量。 某些浏览器确实允许这样做，但如果您还有同名的变量可能会导致问题。 有些浏览器不允许这样。

您应该使用document.getElementById()获取对元素的引用：

document.getElementById("sidebar").style
// NOT
sidebar.style

当然，您不想为同一个元素一遍又一遍地调用document.getElementById() ，因此您可以创建一个变量来保存对元素的引用：

var theSidebar = document.getElementById("sidebar");
// then later to do something to the element's style
theSidebar.style.color = "blue";

另请注意，尝试从您的 HTML 中引用元素的 JavaScript 代码只有在页面加载时解析这些元素之后才能运行。 因此，您需要将代码放在包含在它访问的元素之后的脚本元素中，或者使用文档就绪或加载处理程序延迟执行代码，直到整个页面被解析。

Answer 2

我最终通过简单地更改 div 的 ID 解决了这个问题。 显然，出于某种原因，Firefox 不喜欢将“侧边栏”作为 ID。 不需要对代码进行其他更改。