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' в этой спецификации. |
Рекомендация |
Браузерная совместимость
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) | (Да) | (Да) | (Да) |