Кратко
СкопированоСвойство hidden
позволяет узнать значение HTML-атрибута hidden
или изменить его. Когда hidden
равен true
, элемент скрыт на странице и недоступен для скринридеров.
Как пишется
СкопированоОбращение к свойству hidden
вернёт текущее значение HTML-атрибута hidden
. Если атрибута нет на элементе, результат будет false
:
<input type="text" placeholder="Введите почту"><div class="error" hidden>Неправильная почта</div>
<input type="text" placeholder="Введите почту"> <div class="error" hidden>Неправильная почта</div>
const input = document.querySelector('input')const div = document.querySelector('div')console.log(input.hidden)// falseconsole.log(div.hidden)// true
const input = document.querySelector('input') const div = document.querySelector('div') console.log(input.hidden) // false console.log(div.hidden) // true
Присвоение значения в hidden
изменит значение атрибута. В зависимости от значения элемент скроется или появится. Скроем поле ввода из примера выше:
input.hidden = true
input.hidden = true
В результате у поля ввода появится атрибут hidden
и элемент скроется:
<input type="email" placeholder="email@example.com" hidden>
<input type="email" placeholder="email@example.com" hidden>
Если присвоить false
то атрибут будет удалён с элемента, а сам элемент снова станет видимым:
input.hidden = false
input.hidden = false
Как понять
СкопированоHTML-атрибут hidden
существует давно и работает так же как display
. Когда атрибут активен, элемент будет не только визуально скрыт, но и не будет занимать место на странице. То есть скрытый элемент будет вести себя так, будто его совсем нет.
Скрывать элементы через display
можно в CSS или с помощью свойства style
, но атрибутом hidden
удобно управлять из JavaScript.