/ ↲
    Расширенный поиск

    JavaScript

    .hidden

    Свойство, с помощью которого узнают или изменяют значение 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.

    Читайте также