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

113

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

function showDiv()
{
    [DIV].visible = true;
    //or something
}

javascript html

— Нейрон
источник

1

Почему бы просто не использовать JQuery? .скрывать() ?

— coderama

Могу ли я использовать это для имени div, поэтому, если бы div был назван test, я бы сделал test.hide()?

8

@JackStone: Нет, только если вы уже используете библиотеку jQuery. Некоторым людям просто нравится продвигать его по каждому вопросу JavaScript. Даже если да, .hide()видимость не устанавливается. Устанавливает отображение.

6

@am not i am, вы явно не смогли понять, что jQuery действительно великолепен и все делает. (Источник изображения)

— Pekka

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

Иногда для отображения элемента допустимо присвоить пустую строку .

— Basilevs

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 - не делайте этого в производственном коде)

Показать фрагмент кода

.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>

Развернуть фрагмент

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

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';

— Дилип Кумар Чоудхари
источник