Get only visible element using pure javascript

Question

I have elements like below

send Message

send Message

sen         


        
      

Answer 1

Use getBoundingClientRect. It will return height and width of zero if the element is not in the DOM, or is not displayed.

Note that this cannot be used to determine if an element is not visible due to visibility: hidden or opacity: 0. AFAIK this behavior is identical to the jQuery :visible "selector". Apparently jQuery uses offsetHeight and offsetWidth of zero to check for non-visibility.

This solution will also not check if the item is not visible due to being off the screen (although you could check that easily enough), or if the element is hidden behind some other element.

See also Detect if an element is visible (without using jquery)