Element.offsetHeight for Visibility
One of the (perceived) tricky tasks within front-end coding is checking if an element is visible or not. The very naive way of checking if an element is visible (i.e. has presence or takes up space on the page) is by checking its display style value:
var incorrectIsVisible = window.getComputedStyle(someElement, null).getPropertyValue('display'); // "inline", "inline-block", "block", etc.
Notice I'm not checking the opacity as well because an invisible element still takes up space on the screen. The problem with the code above is that you can gain the style of a child but that may not matter if its parent is set to
display: none. For example, if the child's
display style value is
inline-block, but the element's parent
display style is
none, the child element is still not visible. Oddly enough, checking the child element's
offsetHeight value will signal if the element is likely visible:
var correctIsVisible = someElement.offsetHeight; // 0 for hidden, more than 0 for displaying
If the element is a child of an element which is
display: none, the
offsetHeight will be 0 and thus you know the element is not visible despite its
display value. Again, remember that opacity is not considered and an element which is
opacity: 0 is still technically visible, taking up space.