Is there any easy way to tell if an element is shown in CSS?

Question

<div style="display: none;">
   <span>Hello</span>
</div>

const div = document.querySelector('div');
// getComputedStyle(div).display === 'none';

const span = document.querySelector('span');
// how can I tell if the span is shown?

In the code above, is there any easy way to tell whether the span is shown in the window or not?

Can you clarify your question further? `const` does not look like CSS to me — Nico Haase, Aug 27 '20 at 08:12
Thanks @johannchopin, so it looks like there's no easy way in CSS selector? — Qian Chen, Aug 27 '20 at 08:15
I think you could also go to the parent and check the display attribute there. document.querySelect('span').parentElement... — nosTa, Aug 27 '20 at 08:16
@nosTa, yeah, I actually have to go recursively to all ancestors, if there's no other easier ways, or using johannchopin's recommendation to test the element bounding box values. — Qian Chen, Aug 27 '20 at 08:18
Check this post - https://stackoverflow.com/questions/123999/how-can-i-tell-if-a-dom-element-is-visible-in-the-current-viewport — Safwan Samsudeen, Aug 27 '20 at 08:22

score 0 · Answer 1 · answered Aug 27 '20 at 08:29

0

The modern way to do this is to use an intersection observer.

let options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0
}

let observer = new IntersectionObserver(callback, options);

answered Aug 27 '20 at 08:29

David Bradshaw

10,116
3
33
61

This is not related to my question, but it's very interesting. It looks like it will notify when some value changes? – Qian Chen Aug 27 '20 at 08:39

Is there any easy way to tell if an element is shown in CSS?

1 Answers1