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部分之后。

Answer 1

  

我在文档的开头添加了这个

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

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

---

最好在结束null之前使用<script>标记，这样所有元素都已存在于页面中，您无需担心在{{1}中包装代码或DOM ready（DOMContentLoaded）处理程序。

Answer 2

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

Answer 3

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

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

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

#divA { display: none; }