Web要素が見えないかどうかを検出する方法は？

Question

私は、この要素<ul class = 'pagination-buttons no-bullets'>が表示されているかどうかを確認しようとしています：

<ul class = 'pagination-buttons no-bullets'>が表示されている場合は、その親要素が<ul class = 'pagination-buttons no-bullets'>が見えないとき、その親要素がclass = 'page-number-section cloaked'を持って、class = 'page-number-section'を持っています。要素自身の属性は可視性によって変化しません。

私はその親クラスを見て、それが見えるかどうかを検証することができますが、別の方法がありますか？例えばpageObj.QuerySelector().visible()のようなものですか？

おかげ使用

Answer 1

getComputedStyleあなたは、CSS属性の実際の値を確認することができます。ここで

は一例です：

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>