This is not to be confused with ‘How to tell if a DOM element is visible?’
I want to determine if a given DOM element is visible on the page. E.g. if the element is a child of a parent which has display:none; set, then it won’t be visible.
(This has nothing to do with whether the element is in the viewport or not)
I could iterate through each parent of the element, checking the display style, but I’d like to know if there is a more direct way?
From a quick test in Firefox, it looks like the size and position properties (clientWidth, offsetTop etc.) all return 0 when an element is hidden by a parent being
display:none.