web-dev-qa-db-ja.com

JavaScript：<div>を非表示/再表示する方法

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を使用する代わりに、条件が満たされた場合（この場合はインターネット接続がない場合）に単に再表示したいと思います。

javascripthtmlhideinnerhtml
8
Homie

次に、CSSを使用してdivを非表示および再表示します。あなたはこのようなことをすることができます：

    changeIt.style.visibility = 'hidden';

divを非表示にします。そして

   changeIt.style.visibility = 'visible';

もう一度見せます。

10
Vincent Ramdhanie

DivのdisplayCSSプロパティをnoneに設定します。

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

Javascriptを使用してプログラムで設定する例： http://jsbin.com/ezanuv/1/edit

6
jrajav

Displayプロパティをnoneに設定するか、visibilityプロパティをhiddenに設定することができます。

3
Victor Zamanian

私はcssdisplayプロパティを使用することを好みます。最近書いた実行中のコードがあります。非常にシンプルでスケーラブルです。

  <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>
3
Ahad Ali

最良の方法は、表示を非表示に設定せず、ブロックを表示に設定することです。

//要素は非表示または表示するdivです

element.style.display =（element.style.display == "block"）？ "なし"： "ブロック";

0
user1995240