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

    JavaScript

    .hidden

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

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

    1. Кратко
    2. Как пишется
    3. Как понять

    Кратко

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