如何检测网页元素是否不可见？

Question

我试图找出此元素<ul class = 'pagination-buttons no-bullets'>是否可见：

当<ul class = 'pagination-buttons no-bullets'>可见时，其父元素为class = 'page-number-section'，当<ul class = 'pagination-buttons no-bullets'>不可见时，其父元素为class = 'page-number-section cloaked'。元素本身的属性不会随其可见性而改变。

我可以查看它的父类并验证它是否可见但是还有另一种方法吗？例如类似于pageObj.QuerySelector().visible()？

由于

Answer 1

使用getComputedStyle，您可以检查css属性的实际值。

以下是一个例子：

＆＃13;

＆＃13;

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"));

＆＃13;

.hide-inner .some-class {
  visibility: hidden;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;