javascript - 我无法使用 JavaScript 使 CSS 类可见，建议我进行编辑

Question

如果我将搜索框显示设置为阻止，然后通过使用 JavaScript 我可以将其设置回无，但是我有以下代码，但是在设置为不显示之后，我无法将其设置为阻止显示。

#searchbox
{
    width: 50%;
    height: 400;
    float: left;
    display: none;
}

document.getElementById('searchbox').style.display = 'block';

Answer 1

您的 JavaScript 代码没有问题，您只需要确保您在 元素存在之后运行。这意味着响应用户生成的事件，或仅使用 script元素在标记中比 #searchbox 更靠下元素。

例如，这行不通:Live Example | Source

<script>
document.getElementById('searchbox').style.display = 'block';
</script>
<!-- ...other stuff... -->
<div id="searchbox">I'm hidden</div>

...因为元素在调用 document.getElementById 时不存在.

但这确实有效:Live Example | Source

<div id="searchbox">I'm hidden, but then shown</div>
<!-- ...other stuff... -->
<script>
document.getElementById('searchbox').style.display = 'block';
</script>

...因为元素确实存在。

这是通常建议将您的脚本放在文档的末尾，就在结束之前的几个原因之一 </body>标签。

更多:

• > YUI Best Practices for Speeding Up your Website
• > Google Closure engineers on when DOM elements are ready to be used from script

---

旁注:您的 CSS 有错误。 height: 400;应该是 height: 400px; (您需要单位)。所以我想如果你在 div 中没有任何内容，你可能想知道为什么你看不到它(原因是:因为它没有高度)。