JavaScript에서 요소 가시성을 효율적으로 결정하려면 어떻게 해야 합니까?

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

DOM 내에서 요소가 표시되는지 여부를 식별하는 것은 다양한 웹 개발 작업에 필수적인 경우가 많습니다. . jQuery는 간단한 솔루션을 제공하지만 이 기사에서는 순수한 JavaScript 접근 방식을 탐구합니다.

요소 속성 확인

질문은 표시 및 가시성과 같은 속성을 확인하여 가시성을 결정하도록 제안합니다. 그러나 이러한 속성만으로는 충분하지 않을 수 있습니다.

요소 오프셋 활용

MDN 문서에 따르면 요소 또는 해당 상위 항목이 다음과 같은 경우 요소의 offsetParent 속성은 null을 반환합니다. 표시 속성에 의해 숨겨져 있습니다. 이 접근 방식은 위치가 고정된 요소가 없는 경우에 적합합니다.

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

고정 요소의 창 스타일 지정

위치 고정 요소가 있는 경우 window.getCompulatedStyle()을 사용하는 데 필요합니다.

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

성능 고려 사항

window.getCompulatedStyle()을 사용하는 옵션 2는 더 포괄적이지만 속도가 느릴 수 있습니다. 이 작업이 자주 반복되는 경우 성능 최적화를 위해 오프셋 접근 방식을 사용하는 것이 좋습니다.

위 내용은 JavaScript에서 요소 가시성을 효율적으로 결정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!