Yu Zhang Yu Zhang - 6 months ago 39
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



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>