Question

我正在使用javascript来调整页面元素的大小并重新定位以适应浏览器窗口。我的代码在Chrome，Safari和IE9中完美运行，但在firefox中打破了。控制台给了我两个错误：＆＃34; TypeError：sidebar.style未定义＆＃34;和＆＃34; TypeError：content.style未定义＆＃34;。

我当然有两个div，名为＆＃34;侧边栏＆＃34;和＆＃34;内容＆＃34;并且我在CSS中成功使用了两个Id。它们以何种方式未定义？

令人困惑的是，此脚本的副本用于站点中的另一个页面，但具有该页面特定的另一个Id。它没有任何问题。有谁知道可能导致这个问题的原因？

Answer 1

你没有显示你的代码，但考虑到你的问题的措辞和标题“（div Id）.style in console”我怀疑你试图通过使用id直接在JavaScript中引用这些元素好像它们是变量。有些浏览器允许这样做，但如果你也有同名的变量，它可能会导致问题。有些浏览器不允许这样做。

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

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

当然，您不必为相同的元素反复调用document.getElementById()，因此您可以创建一个保持对该元素的引用的变量：< / p>

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

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

Answer 2

我最终只是通过更改div的id来解决问题。出于某种原因，显然firefox不喜欢'sidebar'作为id。不需要对代码进行其他更改。

Firefox javascript错误＆＃34; undefined＆＃34; （div Id）。在控制台中的风格

2 个答案: