JavaScript만 사용하여 DOM에서 요소 가시성을 어떻게 확인할 수 있습니까?

순수 JavaScript를 사용하여 DOM에서 요소 가시성 결정

질문:

결정할 수 있습니까? jQuery를 사용하지 않고 DOM 내에서 요소가 표시된다면? 구체적으로, 가시성을 확인하기 위해 어떤 속성을 확인해야 합니까?

답변:

MDN 문서에 따르면 요소의 offsetParent 속성은 해당 요소 또는 그 상위 요소 중 하나라도 null을 반환합니다. 표시 스타일 속성을 통해 숨겨져 있습니다. 그러나 이는 요소가 고정된 위치에 있지 않다고 가정합니다. 페이지에 position:fixed 요소가 없는 경우 가시성을 확인하는 간결한 스크립트는 다음과 같습니다.

function isHidden(el) {
    return (el.offsetParent === null);
}

페이지에 position:fixed 요소가 있는 경우 아쉽게도 창을 사용해야 합니다. 성능에 영향을 미칠 수 있는 철저한 검사를 위한 .getCompulatedStyle():

function isHidden(el) {
    var style = window.getComputedStyle(el);
    return (style.display === 'none');
}

특정 사례에 대한 민감성에도 불구하고 두 번째 옵션은 더 나은 기능을 제공합니다. 명확성. 작업을 반복적으로 수행해야 하는 경우 window.getCompulatedStyle()의 성능 저하를 피하면서 효율성을 위한 첫 번째 옵션을 고려하세요.

위 내용은 JavaScript만 사용하여 DOM에서 요소 가시성을 어떻게 확인할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!