How TO - Check if an Element is Hidden

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

Check Hidden Element

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.

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 our CSS Display Tutorial.