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..
 
  }
}

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..
 
  }
}

Tip: Also check out How To - Toggle Hide/Show. Tip: For more information about Display and Visibility, read the CSS Display Tutorial.