Свойство hidden в JavaScript

Свойство hidden отражает одноимённый HTML-атрибут. В статье рассматривается обычное скрытие без специального значения until-found: в этом случае свойство используют со значениями true и false.

• Проверка состояния
• Скрытие и показ
• Свойство и атрибут
• Итого

Проверка состояния

<p class="message" hidden>Настройки сохранены</p>

const message = document.querySelector('.message');

console.log(message.hidden); // true

Если у элемента нет атрибута hidden, свойство вернёт false.

Скрытие и показ

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

В обычном режиме значение true скрывает элемент, а false показывает его. Если элемент скрывает другой CSS-класс или inline-стиль, удаление hidden само по себе не сделает его видимым.

Скрытый элемент остаётся в DOM. Его можно снова найти, изменить и показать, задав message.hidden = false.

Свойство и атрибут

При значении true браузер добавляет элементу атрибут hidden. При значении false - удаляет его.

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

Итого

element.hidden позволяет проверить или изменить состояние атрибута hidden. Для скрытия используйте true, для показа - false.