JavaScript：如何隐藏/取消隐藏 <div>
Posted
技术标签:
【中文标题】JavaScript：如何隐藏/取消隐藏 <div>【英文标题】：JavaScript: How to Hide / Unhide <div> 【发布时间】：2012-12-15 02:26:42 【问题描述】：我试图避免使用innerhtml，因为它会导致我的浏览器崩溃，可能是由于 250 毫秒的刷新率。
无论如何，我宁愿在隐藏的<div> 中包含一些内容，并且仅在满足特定条件时才使<div> 可见。解决这个问题的最佳方法是什么？
基本上，我现在正在做的是..
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);
这会使我的浏览器崩溃，因为我不是使用innerHTML 来打印“离线”而是整个<div>。我想隐藏这个<div>，而不是使用innetHTML，在满足条件时简单地取消隐藏（在这种情况下，没有互联网连接）。
【问题讨论】：
我会将setInterval() 更改为递归调用的setTimeout() - 这不应该让您的浏览器崩溃。当然，内部 setInterval 应该是 setTimeout - 一次性事件。
【参考方案1】：
然后使用 CSS 来隐藏和取消隐藏 div。你可以这样做：
changeIt.style.visibility = 'hidden';
使 div 消失。还有
changeIt.style.visibility = 'visible';
再次显示。
【讨论】：
@EliUnger：需要注意的是，使用visibility 隐藏元素仍会占用页面空间，而display = 'none' 实质上会删除它——具体使用取决于您的情况。跨度>
【参考方案2】：
将 div 的display CSS 属性设置为none。
https://developer.mozilla.org/en-US/docs/CSS/display
使用 javascript 以编程方式设置它的示例：http://jsbin.com/ezanuv/1/edit
【讨论】：
我知道 display 属性 - 但是如何将 DIV 设置为 display: none 如果满足条件？基本上，使用 JavaScript。 @EliUnger，我添加了一个示例。有很多方法可以做到这一点；这是一。 （请注意，querySelector 只是获取 DOM 元素的一种方式；getElementById 也可以。） @EliUnger:changeIt.style.display = 'none';
谢谢，看来你和文森特的答案是一样的 :-) 感谢你的帮助。
@EliUnger，实际上，我们没有。请参阅 w3d 对文森特答案的评论。【参考方案3】：
我更喜欢使用 css 显示属性。我有一个我最近写的运行代码。它也非常简单且可扩展。
<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>
【讨论】：
【参考方案4】：您可以将 display 属性设置为 none 或将 visibility 属性设置为 hidden。
【讨论】：
【参考方案5】：最好的方法是将显示设置为不显示，将显示设置为隐藏
//元素是你要隐藏或显示的div
element.style.display = (element.style.display == "block") ? “无”：“阻止”；
【讨论】：
以上是关于JavaScript：如何隐藏/取消隐藏 <div>的主要内容，如果未能解决你的问题，请参考以下文章