We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

HTMLElement.hidden

HTMLElement Свойство hidden является Boolean типом данных , который принимает значение true , если содержимое спрятано, в противном случае значение будет false. Это свойство соверешенно отличается от использования CSS свойства display , чтобы контролировать отображение элемента.Свойство hidden применимо ко всем режимам  представления и не должно использоваться для скрытия содержимого предназначенного для прямого доступа к пользователю. Соответствующие варианты использования включают:
  •  Содержимое, которое не является особенно важным, но может быть необходимо позже
  • Содержимое, которое было раньше необходимо, но больше нет в нем необходимости
  • Содержимое, которое повторно используется другими частями страницы по шаблону
  • Создание заставного холста в качестве буфера рисования

Неуместные варианты использования включают:

  • Скрытие панелей в диалоговом окне с вкладками
  • Скрытие содержимого в одной презентации, предполагая, что оно будет видимым в других

Элементы, которые не hidden не должны ссылаться на элементы которые hidden.

Синтаксис

isHidden = HTMLElement.hidden;


HTMLElement.hidden = true | false;

Значение

Если элемент спрятан, то значение true, в противном случае false;  

Пример

Пример, где скрытий блок используется для хранения "thank you" сообщения, которое отображается после того, как пользователь соглашается с необычным запросо.

JavaScript

document.getElementById("okButton")
        .addEventListener("click", function() {
  document.getElementById("welcome").hidden = true;
  document.getElementById("awesome").hidden = false;
}, false);

Этот код устанавливает обработчика для кнопки "OK", которая скрывает панель приветсвия и делает The follow-up panel панель с необычным именем "awesome" - видимой в этом месте.

HTML

HTML-код для двух boxes показанных здесь.

Welcome panel

<div id="welcome" class="panel">
  <h1>Welcome to Foobar.com!</h1>
  <p>By clicking "OK" you agree to be awesome every day!</p>
  <button class="button" id="okButton">OK</button>
</div>

Этот  HTML создает панель, которая приветствует пользователей на сайте и рассказывает им о том с чем они соглашаются нажимая на кнопку OK.

The follow-up panel

После того, как пользователь нажимает OK в welcome panel, JavaScript код меняет две манели изменяя их значения hidden. Cледующая The follow-up panel представлена в этом HMTL:

<div id="awesome" class="panel" hidden>
  <h1>Thanks!</h1>
  <p>Thank you <strong>so</strong> much for agreeing to be
  awesome today! Now get out there and do awesome things
  awesomely to make the world more awesome!</p>
</div>

CSS

Стилизованное содержимое использует CSS предсталвенное внизу.

.panel {
  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
  border: 1px solid #22d;
  padding: 12px;
  width: 500px;
  text-align: center;
}

.button {
  font: 22px "Open Sans", Helvetica, Arial, sans-serif;
  padding: 5px 36px;
}

h1 {
  margin-top: 0;
  font-size: 175%;
}

Результат

Технические требования

Specification Status Comment
HTML Living Standard
Определение 'HTMLElement.hidden' в этой спецификации.
Живой стандарт  
HTML 5.1
Определение 'HTMLElement.hidden' в этой спецификации.
Рекомендация  
HTML5
Определение 'HTMLElement.hidden' в этой спецификации.
Рекомендация  

Браузерная совместимость

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Да) (Да) 4.0 (2) (Да) (Да) (Да)
Feature Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Да) (Да) (Да) 4.0 (2) (Да) (Да) (Да)

Смотрите также

Метки документа и участники

Внесли вклад в эту страницу: vlad-meskalin
Обновлялась последний раз: vlad-meskalin,