Yu Zhang Yu Zhang - 1 year ago 98
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

<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


Answer Source

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 class="show-inner">
  <div id="a2" class="some-class">def</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download