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

DOM의 가시성 감지

문서 개체 모델(DOM)의 요소로 작업할 때 요소가 표시됩니다. 순수 JavaScript에서는 jQuery와 같은 라이브러리를 사용하지 않고 가시성을 확인하려면 특정 HTML 속성을 자세히 조사해야 합니다.

요소의 가시성을 확인하려면 다음 속성을 고려하세요.

• display: 이 속성은 요소의 표시 동작을 지정합니다. "없음"으로 설정하면 요소가 숨겨집니다.
• visibility: 이 속성은 요소의 가시성을 제어하여 요소를 숨기거나 표시할 수 있습니다.

제기된 문제에서 사용자는 가시성을 확인하기 위해 window.getCompulatedStyle(my_element)['display'])를 사용하려고 시도했지만 실패했습니다. 정확합니다.

그러나 offsetParent 속성을 사용하여 요소 가시성을 확인하는 대체 접근 방식을 사용할 수 있습니다. 요소 또는 해당 상위 요소의 표시 속성이 "없음"으로 설정된 경우 해당 offsetParent는 null이 됩니다. 이는 요소가 표시되는지 여부를 결정하는 데 사용될 수 있습니다.

고정 위치가 없는 요소의 경우 다음 기능을 사용할 수 있습니다.

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

고정 위치가 있는 요소의 경우 더 많은 정확한 접근 방식은 더 많은 극단적인 경우를 설명하는 window.getCompulatedStyle()을 사용하는 것입니다.

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

이 방법은 더 포괄적이지만 이전 방법보다 느립니다. 하나. 속도가 문제라면 가능하면 offsetParent 속성을 사용하는 것이 가장 좋습니다.

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