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

113

Вы можете сделать что-нибудь вроде

function showDiv()
{
    [DIV].visible = true;
    //or something
}
Нейрон
источник
1
Почему бы просто не использовать JQuery? .скрывать() ?
coderama
Могу ли я использовать это для имени div, поэтому, если бы div был назван test, я бы сделал test.hide()?
8
@JackStone: Нет, только если вы уже используете библиотеку jQuery. Некоторым людям просто нравится продвигать его по каждому вопросу JavaScript. Даже если да, .hide()видимость не устанавливается. Устанавливает отображение.
8
Для чего-то вроде этого хороший ответ должен содержать как простое JS-решение, так и одно, показывающее преимущество использования библиотеки - в этом случае не нужно иметь дело со встроенным блоком vs при использовании displayдля отображения элемента.
ThiefMaster

Ответы:

139

если [DIV] является элементом, то

[DIV].style.visibility='visible'

ИЛИ

[DIV].style.visibility='hidden' 
Рон Торнамбе
источник
16
visibilityимеет побочный эффект: пространство, занимаемое элементом, остается зарезервированным. Это может быть, а может и не быть тем, чего хочет ОП,
Пекка,
1
В месте, где написано [DIV], я бы напечатал имя своего div, верно?
20
Нет, использовать document.getElementById('id-of-the-div')вместо[DIV]
ThiefMaster
@JackStone: Это зависит от того, что вы подразумеваете под «именем» вашего div. Если это переменная, которая ссылается на div, тогда да.
1
Итак, если бы мой div был именем testdiv, это было бы document.getElementById('testdiv').style.visibility = 'hidden';?
124

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

ThiefMaster
источник
Я предпочитаю ваш ответ, но я думаю, вам нужно немного поправить elem.style.display = 'none';
Saumil
29

Вы можете использовать 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';
zellio
источник
div.style.visibility = falseу меня не работает в Chrome. И эта trueчасть, кажется, работает больше случайно, потому что она сбрасывает свойство (хотя это не мой голос против)
Пекка,
Ни логические свойства, displayни visibilityони не являются. Кроме того, noneи blockнеобходимость в кавычки , так как они являются строками ..
ThiefMaster
неправильные значения для меток. Они работают сейчас, и я не собираюсь возиться с этим, это слишком упрощенно.
zellio
5

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

функции setAttribute и removeAttribute

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

hide:    document.getElementById("myDiv").setAttribute("hidden","");
unhide:  document.getElementById("myDiv").removeAttribute("hidden");
jarh1992
источник
2
Вы можете улучшить свой ответ? С примером и пояснениями.
Гаэль Барбин
1

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

Камил Келчевски
источник
0

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

function showDiv(isVisible)
{
    [DIV].hidden = !isVisible;
}
Андрей Хохуткин
источник
0

Сделать невидимым с помощью CSS

#div_id {
        /*height: 400px;*/
         visibility:hidden;
    }

Сделать видимым с помощью Javascript

document.getElementById('div_id').style.visibility = 'visible';
Дилип Кумар Чоудхари
источник