How to check if a element is hidden or not in JavaScript

Learn, how to check if a (html) element is hidden or not in JavaScript with the help of examples.

Consider, we have a following html element:

<h1 style="display:none" class="title">How are you</h1>

Now, we need to check if a above h1 element is hidden or visible by using the JavaScript.

Checking if a element is hiddden

To check if a element is hidden or visible , first we need to access the element inside the JavaScript by using the document.querySelector() method, then we need to check it’s style.display property is none or not.

Here is an example:

<h1 style="display:none" class="title">How are you</h1>

const h1 = document.querySelector('.title');

if(h1.style.display === 'none'){
    console.log('im hidden');
}else{
    console.log('im visible');
}

Output:

console.log('im hidden');

In this above example, we are checking if a h1 element is hidden or not by using the display:none property.

Similarly, we can also check if a element is hidden by using the style.visibility property.

const h1 = document.querySelector('.title');

if(h1.style.visibility === 'hidden'){
    console.log('im hidden');
}else{
    console.log('im visible');
}