How TO - Check if an Element is Hidden


Learn how to find out if an element is hidden with JavaScript.


Check Hidden Element

Example

If the <div> element is hidden, do something:

function myFunction() {
  var x = document.getElementById("myDIV");
  if (window.getComputedStyle(x).display === "none") {
    // Do something..
  }
}
Try it Yourself »

Note: When an element is hidden with display:none (like in the example above), the element will not take up any space.

To find out if an element is hidden with visibility:hidden, see the example below. This "hidden" element will take up space.

Example

function myFunction() {
  var x = document.getElementById("myDIV");
  if (window.getComputedStyle(x).visibility === "hidden") {
    // Do something..
  }
}
Try it Yourself »

Tip: Also check out How To - Toggle Hide/Show.

Tip: For more information about Display and Visibility, read our CSS Display Tutorial.


Copyright 1999-2023 by Refsnes Data. All Rights Reserved.