How to Check if an Element is Hidden

Previous Page Offline Detection
Next Page Redirect Web Page

Learn how to use JavaScript to check if an element is hidden.

Check the hidden element

Example

If the <div> element is hidden, perform the following actions:

function myFunction() {
  var x = document.getElementById("myDIV");
  if (window.getComputedStyle(x).display === "none") {
    // Execute certain operations...
  }
}

Try It Yourself

Note:When using display:none When an element is hidden (as shown in the example above), it will not take up any space.

To determine whether an element is hidden via visibility:hidden Hidden, please refer to the following example. This "hidden" element takes up space.

Example

function myFunction() {
  var x = document.getElementById("myDIV");
  if (window.getComputedStyle(x).visibility === "hidden") {
    // Execute certain operations...
  }
}

Try It Yourself

Tutorial:CSS Display

Tutorial:How to Toggle Hide/Show Elements