CODEWITHSUNDEEP
javascriptcssxpath
Yu Zhang
Yu Zhang

Reputation: 2149

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

Upvotes: 2

Views: 130

Answers (1)

Dekel
Dekel

Reputation: 62556

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>

Upvotes: 1

Related Questions