웹 요소가 보이지 않는지 확인하는 방법은 무엇입니까?

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 속성의 실제 값을 확인할 수 있습니다.

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>