Hide an element

Set the hidden attribute.

JavaScriptBrowser · DOM Version 1.0.0 · MIT · .md

function hide(element) { element.hidden = true; }

Usage

Markup

<p id="notice">Saved</p>

Script

const notice = document.querySelector('#notice');
hide(notice);
notice.checkVisibility(); // → false

Lines marked → were executed in headless Chromium against the markup above, and each result was compared with the value shown. Lines marked e.g. are illustrative.

Know the limits

• hidden removes the element from layout and from the accessibility tree. A stylesheet rule such as display: flex overrides it; add [hidden] { display: none !important } to be safe.
• visibility: hidden keeps the space. To hide content visually but keep it for screen readers, use a visually-hidden class instead.

The function above is the code the usage lines run. It does not validate its arguments; add checks where it receives untrusted input.

Keep exploring

• Check if a given DOMRect is contained within another DOMRect — True when the target lies inside the container or on its edges.
• Check if two DOMRects intersect — Two rects intersect when they meet on both axes.
• Compare two DOMRects for size and position match — Compare x, y, width and height exactly.