JavaScript：如何隐藏/显示<div>

Question

JavaScript：如何隐藏/显示<div>

10

我试图避免使用 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来打印“离线”，而是使用整个

。我希望这个

被隐藏起来，而不是使用innerHTML，如果条件满足（在这种情况下，没有网络连接），则简单地取消隐藏。

- Homie

我会将 setInterval() 更改为递归调用的 setTimeout() - 这不应该导致浏览器崩溃。当然，内部的 setInterval 应该是一个 setTimeout - 一次性事件。 - MrWhite

5个回答

7

将 div 元素的 CSS 属性 display 设置为 none。

https://developer.mozilla.org/en-US/docs/CSS/display

使用Javascript编程设置的示例：http://jsbin.com/ezanuv/1/edit

- jonvuri

我知道display属性 - 但如果满足某个条件，如何将DIV设置为display:none呢？基本上，使用JavaScript。 - Homie

@EliUnger，我已经添加了一个例子。有许多方法可以做到这一点；这是其中一种。（请注意，querySelector只是获取DOM元素的一种方式；getElementById同样有效。） - jonvuri

@EliUnger: changeIt.style.display = 'none'; - MrWhite

谢谢，看起来你和文森特的答案一样 :-) 我很感激你的帮助。 - Homie

@EliUnger，实际上我们并没有。请看w3d对Vincent答案的评论。 - jonvuri

6

我更喜欢使用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>

- Ahad Ali

3

你可以将display属性设置为none，也可以将visibility属性设置为hidden。

- Victor Zamanian

0

最好的方法是对于隐藏的元素设置display:none，对于可见的元素设置display:block

// 元素是您想要隐藏或显示的div

element.style.display = (element.style.display == "block") ? "none": "block";

- user1995240

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Vincent Ramdhanie · Accepted Answer

然后使用CSS来隐藏和显示div。你可以像这样做：

    changeIt.style.visibility = 'hidden';

使div消失。并且

   changeIt.style.visibility = 'visible';

再次显示它。