순수 JavaScript에서 요소 가시성을 어떻게 결정할 수 있습니까?

순수 JavaScript에서 요소 가시성 결정

jQuery가 없는 경우 개발자는 요소가 DOM 내에서 표시되는지 확인하는 방법을 찾는 경우가 많습니다. . 이 문서에서는 가시성 또는 숨겨진 상태를 나타낼 수 있는 다양한 속성을 탐색하면서 이 질문을 다룹니다.

표시 속성을 검토하는 것은 여전히 ​​중요한 요소이지만 유일한 고려 사항은 아닙니다. 가시성 속성은 요소가 현재 숨겨져 있는지 여부를 나타내는 가시성에 영향을 미칠 수도 있습니다.

그러나 추가 속성에도 주의가 필요할 수 있습니다. MDN 문서에 따르면 요소의 offsetParent 속성은 해당 요소 또는 해당 부모가 표시 스타일을 통해 숨겨지면 null을 반환합니다. 고정 요소를 제외한 가시성을 결정하려면 다음 스크립트를 사용할 수 있습니다.

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

그러나 고정 요소에는 window.getCompulatedStyle()을 사용하는 다른 접근 방식이 필요할 수 있습니다. 다음 함수는 이러한 요소를 고려합니다.

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

두 번째 옵션은 더 포괄적이지만 계산 속도가 느릴 수 있습니다. 따라서 최적의 선택은 작업 빈도에 따라 다릅니다.

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