9

我试图避免使用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

4

5 回答 5

12

然后使用 CSS 隐藏和取消隐藏 div。你可以这样做：

    changeIt.style.visibility = 'hidden';

使 div 消失。和

   changeIt.style.visibility = 'visible';

再次展示它。

于 2012-12-30T17:40:29.940 回答
7

将displaydiv 的 CSS 属性设置为none.

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

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

于 2012-12-30T17:39:04.563 回答
5

我更喜欢使用 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>
于 2014-07-23T01:05:15.313 回答
3

您可以将 display 属性设置为 none 或将 visibility 属性设置为 hidden。

于 2012-12-30T17:41:26.810 回答
0

最好的方法是将显示设置为无隐藏和阻止可见

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

element.style.display = (element.style.display == "block") ？“无”：“阻止”；

于 2013-01-20T19:20:06.487 回答