Strona główna >JavaScript >Leksykon JS – metody i obiekty >HTMLElement.hidden

HTMLElement.hidden

element.hidden = true | false

Odpowiada atrybutowi hidden. Ukryty element nie jest wyświetlany, a czytniki ekranu go pomijają.

Przykład pracuje z kodem HTML nad kodem JavaScript.

Wartość zwracana

true, false albo 'until-found'.

Przykłady

<style>.flex { display: flex; }</style><p id="info">Zapisano</p><div id="panel" class="flex">Panel</div>

const info = document.getElementById('info');
info.hidden = true;
console.log(info.outerHTML, getComputedStyle(info).display);
info.hidden = false;
console.log(info.outerHTML);
const panel = document.getElementById('panel');
panel.hidden = true;
console.log(getComputedStyle(panel).display);

Wynik:

<p id="info" hidden="">Zapisano</p> none
<p id="info">Zapisano</p>
flex

Na co uważać

CSS z właściwością display nadpisuje atrybut hidden (panel z display: flex został widoczny). Pomoże reguła [hidden] { display: none !important; }.
Wartość 'until-found' ukrywa treść, ale przeglądarka pokaże ją przy wyszukiwaniu na stronie (Ctrl+F).

Obsługa w przeglądarkach

Baseline – szeroko dostępne: działa we wszystkich popularnych przeglądarkach, i to od dawna (najpóźniej od 2015 roku). Od wersji: Chrome 6, Firefox 4, Safari 5.1; brak w Node.js (API przeglądarki). Stan: październik 2026 (MDN browser-compat-data).

Zobacz też:
Element.toggleAttribute()
HTMLElement.style
classList.toggle()