Как сделать DIV видимым и невидимым с JavaScript

Ответ 1

если [DIV] - это элемент, тогда

[DIV].style.visibility='visible'

ИЛИ

[DIV].style.visibility='hidden' 

Ответ 2

Предположим, вы не используете библиотеку, такую ​​как jQuery.

Если у вас еще нет ссылки на элемент DOM, воспользуйтесь var elem = document.getElementById('id');

Затем вы можете установить любое свойство CSS этого элемента. Чтобы показать/скрыть, вы можете использовать два свойства: display и visibility, которые имеют несколько разные эффекты:

Настройка style.display будет выглядеть так, как если бы элемент вообще отсутствовал ( "удален" ).

elem.style.display = 'none'; // hide
elem.style.display = 'block'; // show - use this for block elements (div, p)
elem.style.display = 'inline'; // show - use this for inline elements (span, a)

или style.visibility на самом деле сделает div все еще там, но будет "все пустым" или "все белые"

elem.style.visibility = 'hidden'; // hide, but lets the element keep its size
elem.style.visibility = 'visible';

Если вы используете jQuery, вы можете сделать это еще проще, если хотите установить свойство display:

$(elem).hide();
$(elem).show();

Он автоматически использует соответствующее значение display; вам не нужно заботиться о типе элемента (встроенный или блок). Кроме того, elem может быть не только элементом DOM, но также селектором, таким как #id или .class, или что-либо еще, что является истинным CSS3 (и более!).

Ответ 3

Вы можете использовать visibility или display, но вы должны применить изменения к объекту div.style, а не к объекту div.

var div = document.getElementById('div_id');

// hide
div.style.visibility = 'hidden';
// OR
div.style.display = 'none';

// show
div.style.visibility = 'visible';
// OR
div.style.display = 'block';

Ответ 4

Вы можете использовать функции DOM: setAttribute и removeAttribute. По следующей ссылке у вас есть пример того, как их использовать.

Функции setAttribute и removeAttribute

Быстрый просмотр:

hide:    document.getElementById("myDiv").setAttribute("hidden","");
unhide:  document.getElementById("myDiv").removeAttribute("hidden");

Ответ 5

Вы можете использовать opacity которая похожа на visibility но позволяет сгладить переход и управлять другими параметрами, такими как высота (для простоты фрагмента я поместил логику js непосредственно в html - не делайте этого в производственном коде)

.box { width:150px; height: 150px; background: red; transition: 0.5s }

.hide { opacity: 0; height: 10px}

<div id="box" class="box"></div>

<button onclick="box.classList.toggle('hide')">Toggle</button>

Ответ 6

что я должен сделать, чтобы увидеть скрытые символы???

Ответ 7

Используйте атрибут "скрытый" элемента DOM:

function showDiv(isVisible)
{
    [DIV].hidden = !isVisible;
}