.hidden

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

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

Кратко

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

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

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