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 просто отображалось, если выполняется условие (в данном случае нет подключения к Интернету).


javascript html hide innerhtml
person Homie    schedule 30.12.2012    source источник
comment
Я бы изменил setInterval() на рекурсивно называемый setTimeout() - это не должно привести к сбою вашего браузера. Конечно, внутреннее setInterval должно быть setTimeout - разовым событием.   -  person MrWhite    schedule 30.12.2012

Ответы (5)


arrow_upward
10
arrow_downward

Затем используйте CSS, чтобы скрыть и показать div. Вы можете сделать что-то вроде этого:

    changeIt.style.visibility = 'hidden';

чтобы div исчез. А также

   changeIt.style.visibility = 'visible';

чтобы снова показать.

person Vincent Ramdhanie    schedule 30.12.2012
comment
@EliUnger: Следует отметить, что скрытие элемента с visibility по-прежнему занимает место на странице, тогда как display = 'none' по существу удаляет его - что вы используете, зависит от вашей ситуации. - person MrWhite; 30.12.2012

arrow_upward
7
arrow_downward

Установите для свойства CSS display элемента div значение none.

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

Пример программной установки с помощью Javascript: http://jsbin.com/ezanuv/1/edit

person jrajav    schedule 30.12.2012
comment
Я знаю о свойстве отображения, но как я могу настроить отображение DIV: none, если условие выполнено? В основном, используя JavaScript. - person Homie; 30.12.2012
comment
@EliUnger, я добавил пример. Есть много способов сделать это; это один. (Обратите внимание, что querySelector — это просто способ получить элемент DOM; getElementById работает точно так же.) - person jrajav; 30.12.2012
comment
@ЭлиУнгер: changeIt.style.display = 'none'; - person MrWhite; 30.12.2012
comment
Спасибо, похоже, у вас с Винсентом один и тот же ответ :-) Я ценю вашу помощь. - person Homie; 30.12.2012
comment
@EliUnger, на самом деле нет. См. комментарий w3d к ответу Винсента. - person jrajav; 30.12.2012

arrow_upward
4
arrow_downward

Я предпочитаю использовать свойство отображения 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>
person Ahad Ali    schedule 23.07.2014

arrow_upward
3
arrow_downward

Вы можете либо установить для свойства отображения значение none, либо для свойства видимости установить значение hidden.

person Victor Zamanian    schedule 30.12.2012

arrow_upward
0
arrow_downward

Лучший способ - установить отображение none для скрытого и блокировать для видимого.

// элемент - это div, который вы хотите скрыть или отобразить

element.style.display = (element.style.display == "блок")? «нет»: «заблокировать»;

person user1995240    schedule 20.01.2013