Element.hidden

Свойство .hidden у DOM-элементов позволяет узнать или изменить значение HTML-атрибута hidden

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Свойство Element.hidden позволяет узнать значение HTML-атрибута hidden или изменить его. Когда Element.hidden равен true, элемент скрыт на странице и недоступен для скринридеров.

Как пишется

Секция статьи "Как пишется"

Обращение к свойству Element.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')// falseconsole.log(input.hidden)// trueconsole.log(div.hidden)
          const input = document.querySelector('input')
const div = document.querySelector('div')

// false
console.log(input.hidden)
// true
console.log(div.hidden)

        
        
          
        
      

Присвоение значения в Element.hidden изменит значение атрибута 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: none. Когда атрибут активен, элемент будет не только визуально скрыт, но и не будет занимать место на странице. То есть скрытый элемент будет вести себя так, будто его совсем нет.

Скрывать элементы через display можно в CSS или с помощью атрибута style, но атрибутом hidden удобно управлять из JavaScript.