Show an element

Clear the hidden attribute and any inline display: none.

JavaScriptBrowser · DOM Version 1.0.0 · MIT · .md

function show(element) { element.hidden = false; element.style.removeProperty('display'); }

Usage

Markup

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

Script

const notice = document.querySelector('#notice');
show(notice);
notice.checkVisibility(); // → true

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

• If a stylesheet hides the element, it stays hidden; toggle a class instead.
• The original only cleared the inline display value, so an element hidden with the hidden attribute stayed hidden.

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.