Photo by Kai Oberhäuser

If you want to check if an element is actually hidden then you can’t just access its ​style ​property with JavaScript (as the properties on the object will be empty unless you have already assigned a value with JavaScript).

You can however use the ​getComputedStyle ​function available on the window object.

window​.​getComputedStyle​(​myElement​).​display ​===​ ​'none'​;
window​.​getComputedStyle​(​myElement​).​visibility ​=== 'hidden'​;

You pass in a reference to the element you are checking and it’s probably worth checking the value of both the display and visibility properties.

You could combine this into a function to check both at the same time.

const​ ​isElementHidden​ ​=​ elem ​=> window​.​getComputedStyle​(​elem​).​display ​===​ ​'none'​ ​|| window​.​getComputedStyle​(​myElement​).​visibility ​===
'hidden'​;

Watch the tutorial for more details.

Follow me on Twitter (@codebubb) for more tutorials!