LearnJS

Скрытие и показ элементов в JavaScript

Уведомление, меню или блок с настройками иногда нужно временно скрыть, а затем снова показать. Для этого используют CSS-класс или атрибут hidden.

Скрытие - не удаление

Скрытый элемент остаётся в DOM: его можно найти через JavaScript, изменить и снова показать. Удалённого элемента в DOM уже нет.

В обычном случае и CSS-правило с display: none, и атрибут hidden убирают элемент из раскладки страницы. Соседние элементы займут освободившееся место.

Скрытие через CSS-класс

Класс сам по себе не скрывает элемент. Он обозначает состояние, а CSS определяет, как это состояние выглядит.

<p class="notice">Настройки сохранены</p>
.notice.is-hidden {
  display: none;
}
const notice = document.querySelector('.notice');

notice.classList.add('is-hidden'); // скрыть
notice.classList.remove('is-hidden'); // показать

JavaScript меняет состояние элемента, а CSS решает, как оно будет выглядеть. CSS-класс не обязан использовать display: none: он может менять несколько свойств одновременно.

В этом простом варианте элемент скроется сразу: при обычной смене display плавный переход не запустится. Для плавного визуального эффекта класс чаще меняет opacity или transform, а transition задают в CSS. При opacity: 0 элемент остаётся в раскладке и может получать события, поэтому это не полная замена display: none.

Атрибут hidden

hidden подходит для простого состояния: элемент сейчас нужно показывать или нет.

<p class="notice" hidden>Настройки сохранены</p>
const notice = document.querySelector('.notice');

notice.hidden = false; // показать
notice.hidden = true; // скрыть

Свойство hidden связано с одноимённым HTML-атрибутом. При значении true атрибут добавляется, а при false - удаляется.

hidden=“false” всё равно скрывает элемент: значение false не означает отсутствие атрибута. Чтобы показать элемент, удалите атрибут или задайте element.hidden = false.

Что выбрать

  • Используйте hidden, когда элемент нужно просто временно показать или скрыть.
  • Используйте CSS-класс, когда состояние должно менять несколько CSS-свойств, иметь свой вид или плавный переход.
  • Удаляйте элемент из DOM, только если он больше не нужен на странице.

Итого

И CSS-класс, и hidden скрывают элемент без удаления из DOM. hidden подходит для простого состояния, а класс даёт CSS больше возможностей для оформления и переходов.