Html 如何使用javascript默认隐藏div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19163327/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I make a div hidden by default using javascript?
提问by Arringar1
I am using the following code to toggle visibility of a div area:
我正在使用以下代码来切换 div 区域的可见性：
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
To toggle it, I am using onclick="toggle_visibility('id_of_element_to_toggle');"
要切换它，我使用 onclick="toggle_visibility('id_of_element_to_toggle');"
The part that I don't like is that this makes it visible by default when the page loads. How can I make it hidden by default until it is toggled to be visible? I'd like to do this in the same javascript block if possible. The simpler the better.
我不喜欢的部分是这使得它在页面加载时默认可见。如何在默认情况下隐藏它，直到它被切换为可见？如果可能，我想在同一个 javascript 块中执行此操作。越简单越好。
How can I toggle the visibility of 2 divs at once? To make them switch.
如何一次切换 2 个 div 的可见性？使他们切换。
回答by David Lee
You need to call it:
你需要调用它：
<script type="text/javascript">
toggle_visibility('id_of_element_to_toggle');
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
You could add some CSS too:
你也可以添加一些 CSS：
#id_of_element_to_toggle{display:none;}
Performance will be faster with CSS.
使用 CSS 性能会更快。
回答by Brenden
since you're using CSS to toggle it, you should use CSS to set its initial state:
display:noneeither inline in the styleattribute or ideally in a global stylesheet.
由于您使用 CSS 来切换它，因此您应该使用 CSS 来设置其初始状态：
display:none在style属性中内联或理想情况下在全局样式表中。
回答by Amos
In cases such as this I hide the div using css, either inline or in the stylesheet, so that it is hidden by default.
在这种情况下，我使用 css 隐藏 div，无论是内联还是在样式表中，以便默认情况下隐藏它。
<div style="display:none;">
Or, you could load the div without content, then populate it via your javascript with e.innerHTML="some content" or ajax?
或者，您可以加载没有内容的 div，然后通过您的 javascript 使用 e.innerHTML="some content" 或 ajax 填充它？
回答by Luke
The most simple option is to set this in the CSS, then it will truly be set as hidden from the moment that the style is applied by the browser, before your Javascript is executed:
最简单的选择是在 CSS 中设置它，然后从浏览器应用样式的那一刻起，在执行 Javascript 之前，它将真正设置为隐藏：
div.item_name { display: none; }
回答by user2092317
try this
尝试这个
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a>
<div id="foo" style="display:none">toggle visibility.</div>
</body>
</html>
