.hidden

Свойство 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.