Menu
I checked the API for some pseudo-selector such as :visible or :hidden, but was disappointed to find no such selector exists. Since jQuery has supported these selectors for a while now, I was hoping they'd be implemented. The idea is, that I'd like to show a certain element only when the element next to it is hidden, but I don't want to use JavaScript to do so. Any options?
569
We can do the following to check an element's visibility in the viewport: Get the bounding rect of the DOM element using the getBoundingClientRect . This method returns an object with an element's width, height, and position relative to the viewport.
Another way to check if an element is hidden is to use the window. getComputedStyle() method. It will return the display property value of the object. We can check if the string is equal to none meaning the element is hidden and do something.
getBoundingClientRect() returns a {} on console. log, whether the element is ready or not :( – PayamB. Since Puppeteer can always run normal JS, the canonical thread Check if element is visible in DOM should be linked because it has a huge number of resources that can be used via .
No, it is not possible and can't be possible, at least in stylesheets.
Otherwise, you could create an infinite loop:
element:visible {
display: none;
}
The element would be visible at first, then the selector would select it and hide it, then the selector wouldn't apply and it would become visible again, etc.
It would be possible to allow that pseudo-class only in JS APIs like querySelector. But as far as I know there isn't anything like that, and it wouldn't be CSS-only.
91
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
