How to check if an element in hidden in Javascript

January 30, 2019

This question is commonly asked around the web. In many cases with complex UIs you'd like to know if an element is currently hidden or visible, that's if you don't already keep track of this in a state object or when you're hiding the element initially.

Also many wonder if jQuery is needed for this, the answer is no.

Quick way to check if an element is hidden in Javascript:

const isHidden = element => (
    parseFloat(element.style.opacity) === 0 ||
    element.style.display === "none" ||
    element.style.visibility === "hidden"
)

Note: This is a convenience function that just checks multiple attributes in the element. You could add or remove any of the checks.