Yu Zhang Yu Zhang - 9 days ago 8
CSS Question

How to detect whether a web element is invisible?

I am trying to find out whether this element

<ul class = 'pagination-buttons no-bullets'>
is visible:

enter image description here

When
<ul class = 'pagination-buttons no-bullets'>
is visible, its parent element has
class = 'page-number-section'
, when
<ul class = 'pagination-buttons no-bullets'>
is invisible, its parent element has
class = 'page-number-section cloaked'
. The element itself's attributes do not change with its visibility.

I could look at its parent class and verify whether it is visible but is there another way to do it? e.g. something like
pageObj.QuerySelector().visible()
?

Thanks

Answer

Using the getComputedStyle you can check the actual value of a css attribute.

Here is an example:

console.log('#a1 visibility is:', window.getComputedStyle(document.getElementById('a1'), null).getPropertyValue("visibility"));

console.log('#a2 visibility is:',window.getComputedStyle(document.getElementById('a2'), null).getPropertyValue("visibility"));
.hide-inner .some-class {
  visibility: hidden;
}
<div class="hide-inner">
  <div id="a1" class="some-class">abc</div>
</div>

<div class="show-inner">
  <div id="a2" class="some-class">def</div>
</div>