JavaScript Element checkVisibility() Method

Beginner
5 min read
Updated: Nov 2026
3 examples
Method
Decorative image with the word CHECKVISIBILITY

Definition

The Element.checkVisibility() method returns a boolean: whether the element is potentially visible (MDN). By default it is false when the element has no layout box (for example display: none / contents) or when content-visibility: hidden applies.

Pass the required arguments shown below. Check return values and browser support before you rely on the result.

Syntax

Call el.checkVisibility. Start with this line.

JavaScript
el.checkVisibility(options?)
CallWhat it does
el.checkVisibility(options?)Primary signature.
el.checkVisibility(...)Call with the arguments your case needs.

Built into the browser. Call checkVisibility(...) on an Element — no import required.

Library declarations
JavaScript
el.checkVisibility(options?)

Parameters

ParameterDescription
optionsOptional. Extra CSS visibility rules

Return Value

Return ValueDescription
*true or false

JavaScript Examples

Example 1 — Default Check

Compare a normal element with display: none.

JavaScript
const a = document.getElementById("a");
const b = document.getElementById("b");
const out = document.getElementById("out");

b.style.display = "none";

out.textContent =
  "a=" + a.checkVisibility() +
  " b=" + b.checkVisibility();
Try It Yourself

How It Works

  1. Call with no options. Uses the default box / content-visibility rules.
  2. Hide with display. display: none removes the layout box.
  3. Read booleans. Visible host → true; hidden host → false.
  4. No stylesheet needed. Set styles from JavaScript in the lab.

Example 2 — Opacity Option

With default options, opacity: 0 can still be “potentially visible.” Opt in to treat it as not visible.

JavaScript
const el = document.getElementById("el");
const out = document.getElementById("out");

el.style.opacity = "0";

out.textContent =
  "default=" + el.checkVisibility() +
  " opacityFlag=" +
  el.checkVisibility({ opacityProperty: true });
Try It Yourself

How It Works

  1. Set opacity to 0. The element still has a layout box.
  2. Default call. MDN: opacity is not checked unless you ask.
  3. Pass the flag. opacityProperty: true makes the check stricter.
  4. Pick the meaning. Match the option set to your product’s idea of “visible.”

Example 3 — Feature Detect

Use checkVisibility when available; otherwise fall back to a simple rect size check.

JavaScript
const el = document.getElementById("el");
const out = document.getElementById("out");

function isMaybeVisible(node) {
  if (typeof node.checkVisibility === "function") {
    return node.checkVisibility({
      opacityProperty: true,
      visibilityProperty: true
    });
  }
  const r = node.getBoundingClientRect();
  return r.width > 0 && r.height > 0;
}

out.textContent = "visible=" + isMaybeVisible(el);
Try It Yourself

How It Works

  1. Detect the API. Older browsers may not have the method.
  2. Prefer the standard check. Use options that match your visibility rules.
  3. Fall back carefully. A non-zero rect is only a rough heuristic.
  4. Keep one helper. Call sites stay simple either way.
Compatibility

Browser Support

Element.checkVisibility() is Baseline Widely available on MDN (across browsers since March 2024). It is not Deprecated, Experimental, or Non-standard. Feature-detect if you support older browsers.

✓ Baseline Widely available

Element.checkVisibility()

Standard “potentially visible” check for DOM elements. Widely available since 2024.

2024+ Widely available
Google Chrome 105+
Supported
Mozilla Firefox 106+
Supported
Apple Safari 17.4+
Supported
Microsoft Edge 105+
Supported
Opera 91+
Supported
Internet Explorer Not supported
Unavailable
checkVisibility() Baseline

Bottom line: Safe for modern browsers. Detect and fall back when targeting older engines.

Frequently Asked Questions

It returns a boolean indicating whether the element is potentially visible (MDN). By default it checks for an associated layout box and whether content-visibility: hidden applies. Optional flags can also test opacity: 0, visibility: hidden/collapse, and content-visibility: auto skip rendering.
No. MDN marks Element.checkVisibility() as Baseline Widely available (across browsers since March 2024). It is not Deprecated, Experimental, or Non-standard.
Not always. true means the element may be visible according to the checks you run. Elements outside the viewport or covered by other content can still return true.
getBoundingClientRect() gives geometry (size/position). checkVisibility() answers whether the element is potentially visible under CSS box / visibility rules. Use both when you need size and visibility.
An optional object: opacityProperty (alias checkOpacity), visibilityProperty (alias checkVisibilityCSS), and contentVisibilityAuto. Each defaults to false.
Feature-detect with typeof el.checkVisibility === "function" and fall back to heuristics like getBoundingClientRect() size checks when needed.

Next: closest()

Find the nearest ancestor (or self) that matches a CSS selector.

closest() →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

14 people found this page helpful

JavaScript Element before() Method JavaScript Element closest() Method