javascript - display = 'none' 在 javascript 中不起作用

Question

我想隐藏 divA 并显示 divB。如果我单击一个按钮，我想隐藏 divB 并显示 divA。我不想使用 JQuery。

页面加载时我无法隐藏 divA。当我单击按钮时，divB 被正确隐藏。

我在文档开头添加了这个

<script>
    var doNotShow= document.getElementById('divA');
    doNotShow.style.display = 'none';
</script>

问题是，它不起作用。奇怪的是，稍后，我尝试通过单击按钮来隐藏 divB，然后 divB 会按应有的方式隐藏。divA 在文件中的 javascript 部分之后。

score 8 · Accepted Answer

我在文档开头添加了这个

您必须在文档中存在具有查询ID的元素document.getElementById 后null执行，否则将返回。

您可以将脚本标记移动到页面底部（或仅在这些元素之后），或将其包装在window.onload处理程序中。

最好<script>在关闭之前使用标签，</body>这样所有元素都已经存在于页面中，您无需担心将代码包装在 DOM 处理程序中window.onload或 DOM 就绪 ( DOMContentLoaded) 处理程序中。

score 1 · Accepted Answer

您的代码divA在 DOM 中存在之前正在运行。这就是为什么它不起作用。

要解决当前解决方案的问题，请将脚本放在divA文档中的标记之后。

但是，您不需要使用 JavaScript，并且可能不应该最初隐藏您的divA元素。您可以改用以下 CSS 规则：

#divA { display: none; }

score 1 · Accepted Answer

Javascript 在被读取时被执行。如果在脚本之后定义了 divA，则没有任何内容可以执行脚本，如果您使用 Firefox 中的 Firebug 或 Chrome 中的开发人员工具等调试工具，您将看到（会发生 TypeError）。

3 回答 3