JavaScript：如何隐藏/取消隐藏 <div>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14092940/
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
JavaScript: How to Hide / Unhide <div>
提问by Homie
I'm trying to avoid using innerHTMLbecause it causes my browser to crash, probably due to the 250 milliseconds refresh rate.
我试图避免使用，innerHTML因为它会导致我的浏览器崩溃，可能是由于 250 毫秒的刷新率。
Anyway, I would rather have some content in an hidden <div>and make the <div>visible only if a certain condition is met. What's the best approach to go around this?
无论如何，我宁愿将某些内容隐藏起来，<div>并且<div>仅在满足特定条件时才使内容可见。解决这个问题的最佳方法是什么？
Basically, what I'm doing now is..
基本上，我现在正在做的是..
setInterval(function () {
if (serverReachable()) {
.... // lines of code
.... // lines of code
var changeIt = document.getElementById('change')
changeIt.innerHTML = '';
timeout = setInterval(function(){window.location.href = "Tracker.html";},5000);
}
} else {
clearTimeout(timeout);
timeout = null;
var changeIt = document.getElementById('change')
changeIt.innerHTML = 'offline';
}
}, 250);
This will crash my browser, because I'm not using innerHTMLto print "offline" but a whole <div>. I want to have this <div>hidden, and instead of using innetHTML, to simply unhide if a condition is met (in this case, no internet connection).
这会使我的浏览器崩溃，因为我不是innerHTML用来打印“离线”而是整个<div>. 我想<div>隐藏这个，而不是使用innetHTML，如果满足条件（在这种情况下，没有互联网连接）简单地取消隐藏。
回答by Vincent Ramdhanie
Then use CSS to hide and unhide the div. You can do something like this:
然后使用 CSS 隐藏和取消隐藏 div。你可以这样做：
changeIt.style.visibility = 'hidden';
to make the div disappear. And
使div消失。和
changeIt.style.visibility = 'visible';
to show it again.
再次展示它。
回答by jrajav
Set the displayCSS property of the div to none.
将displaydiv的CSS 属性设置为none.
https://developer.mozilla.org/en-US/docs/CSS/display
https://developer.mozilla.org/en-US/docs/CSS/display
Example of setting it programmatically with Javascript: http://jsbin.com/ezanuv/1/edit
使用 Javascript 以编程方式设置它的示例：http: //jsbin.com/ezanuv/1/edit
回答by Ahad Ali
I prefer using css display property. I have a running code which I wrote recently. Its very simple and scalable as well.
我更喜欢使用 css display 属性。我有一个我最近写的正在运行的代码。它也非常简单和可扩展。
<HEad>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function() {
$.setDisplay = function (id){
if($("#" + id ).css('display') == 'none'){
$("#" + id ).css('display', 'block');
}
else
if($("#" + id ).css('display') == 'block'){
$("#" + id ).css('display', 'none');
}
}
$('*[id^="divheader"]').click(function (){
$.setDisplay($(this).data("id"));
});
});
</script>
</HEad>
<div id='divheader-div1' data-id='div1'>
This is the header Click to show/unshow
</div>
<div id='div1' style='display: block'>
<div>
<label for="startrow">Retail Price:</label>
<input type="text" name="price" id="price" value=""><small></small>
</div>
</div>
<div id='divheader-div2' data-id='div2'>
This is the header Click to show/unshow
</div>
<div id='div2' style='display: none'>
<div>
<label for="startrow">Division:</label>
<input type="text" name="division" id="division" value=""><small> </small>
</div>
</div>
回答by Victor Zamanian
You could either set the display property to none or the visibility property to hidden.
您可以将 display 属性设置为 none 或将可见性属性设置为 hidden。
回答by user1995240
The best way is to set the display none for hidden and block for visible
最好的方法是设置 display none 为 hidden 和 block 为可见
//the element is the div you want to hide or display
//元素是你想隐藏或显示的div
element.style.display = (element.style.display == "block") ? "none": "block";
element.style.display = (element.style.display == "block") ？“无”：“阻止”；
