How to check if a element is hidden or not in JavaScript
In this post we will give you information about How to check if a element is hidden or not in JavaScript. Hear we will give you detail about How to check if a element is hidden or not in JavaScriptAnd how to use it also give you demo for it if it is necessary.
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" >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" >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');}
Hope this code and post will helped you for implement How to check if a element is hidden or not in JavaScript. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs