요소가 DOM에 표시되는지 확인하는 방법

질문 : 요소가 DOM에 표시되는지 확인

---

요소가 순수 JS (jQuery 없음)에서 표시되는지 확인할 수있는 방법이 있습니까?

예를 들어이 페이지에서 Performance Bikes 에서 거래 (상단 메뉴) 위로 마우스를 가져 가면 거래 창이 표시되지만 처음에는 표시되지 않았습니다. HTML에 있지만 보이지 않습니다.

그래서 DOM 요소가 주어 졌을 때 그것이 보이는지 여부를 어떻게 확인할 수 있습니까? 나는 시도했다 :

window.getComputedStyle(my_element)['display']);

하지만 작동하지 않는 것 같습니다. 어떤 속성을 확인해야할지 궁금합니다. 내 마음에 :

display !== 'none'
visibility !== 'hidden'

내가 놓칠 수있는 다른 것이 있습니까?

답변

---

이 MDN 문서 에 따르면 요소의 offsetParent 속성은 표시 스타일 속성을 통해 숨겨 질 때마다 또는 해당 부모가 null 요소가 고정되지 않았는지 확인하십시오. 위치가없는 경우이를 확인하는 스크립트 position: fixed; 페이지의 요소는 다음과 같을 수 있습니다.

// Where el is the DOM element you'd like to test for visibility
function isHidden(el) {
    return (el.offsetParent === null)
}

이 검색에 잡힐 수있는 위치에 고정 요소가 경우 반면에, 당신은 슬프게도 (천천히) 사용해야합니다window.getComputedStyle() . 이 경우 기능은 다음과 같습니다.

// Where el is the DOM element you'd like to test for visibility
function isHidden(el) {
    var style = window.getComputedStyle(el);
    return (style.display === 'none')
}

옵션 # 2는 더 많은 엣지 케이스를 설명하기 때문에 좀 더 간단 할 수 있지만, 속도도 상당히 느릴 것이므로이 작업을 여러 번 반복해야하는 경우에는 피하는 것이 가장 좋습니다.

출처 : https://stackoverflow.com/questions/19669786/check-if-element-is-visible-in-dom