1

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

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

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

4 回答 4

2

你的 JavaScript 代码很好，你只需要确保你在元素存在后运行。这意味着响应用户生成的事件，或者只是script在标记中使用比元素更靠后的#searchbox元素。

例如，这不起作用：Live Example | 资源

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

...因为在调用document.getElementById.

但这确实有效：Live Example | 资源

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

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

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

更多的：

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

于 2013-05-12T13:31:03.113 回答
2

如果它不工作，然后使用

<script>
document.getElementById('searchbox').style.visibility = 'hidden';
</script>

也许它会帮助你

于 2013-05-13T05:12:22.823 回答
1

好吧，然后您可以定义两个 JavaScript 函数，一个用于隐藏，一个用于显示您的搜索框，正如您所说，如果您最初将其设置为阻止，它就可以正常工作。

好的，然后使用该hide功能在 pageload 事件和 onclick 事件调用隐藏功能时隐藏您的搜索框。它肯定会奏效。

#searchbox
{
    width:50%;
    height:400;
    float:left;
    display:block;
}
function hide()
{
    document.getElementById('searchbox').style.display = 'none';
}
function show()
{
    document.getElementById('searchbox').style.display = 'block';
}
于 2013-05-12T18:50:57.363 回答
0

它应该设置为.style.display = "inline";而不是block. 块用于div和p（一直穿过）。内联是为了span和 input（不是一直跨越）。

于 2013-05-12T16:36:34.123 回答