Sometimes, we want to check if an element is really visible with JavaScript.
In this article, we’ll look at how to check if an element is really visible with JavaScript.
How to check if an element is really visible with JavaScript?
To check if an element is really visible with JavaScript, we can check if the element’s clientHeight is bigger than 0.
For instance, we write
const isViewable = (element) => {
return element.clientHeight > 0;
};
to create the isViewable function to check if element.clientHeight is bigger than 0.
If clientHeight is bigger than 0, then the element is visible since clientHeight includes padding and margin.
Conclusion
To check if an element is really visible with JavaScript, we can check if the element’s clientHeight is bigger than 0.
One reply on “How to check if an element is really visible with JavaScript?”
It could be “visible” in terms of style, but that it is not true, it might be “behind” other element when z-index is lower that other.