일반 JavaScript에서 DOM 요소 가시성을 어떻게 확인할 수 있습니까?

DOM에서 요소 가시성 확인

질문:

다음을 사용하여 DOM에서 요소가 표시되는지 확인할 수 있습니까? jQuery와 같은 외부 라이브러리에 의존하지 않고 JavaScript를 사용하시나요? 그렇다면 정확한 가시성 검사를 위해 어떤 속성을 고려해야 합니까?

답변:

순수 JavaScript에서 요소 가시성을 확인하려면 다음 속성을 고려하십시오.

• display: "display" 스타일이 "none"인 요소가 고려됩니다. 숨김.
• 가시성: 숨겨진 요소에는 "숨김"의 "가시성" 스타일이 있습니다.

요소가 표시되는지 확인하려면 다음을 사용할 수 있습니다. 다음 코드:

function isElementVisible(element) {
  // Check if the element has any parent with "display: none"
  if (element.offsetParent === null) {
    return false;
  }

  // Check if the element itself has "display: none" or "visibility: hidden"
  const style = window.getComputedStyle(element);
  return style.display !== "none" && style.visibility !== "hidden";
}

이 접근 방식은 대부분의 경우에 작동합니다. 그러나 페이지에 "위치: 고정" 요소가 포함된 경우 일반 문서 흐름 외부의 요소도 확인하는 보다 포괄적인 접근 방식을 사용해야 할 수 있습니다. 이러한 경우 다음을 사용할 수 있습니다.

function isElementVisibleFixed(element) {
  // Check if the element has any parent with "display: none"
  if (element.offsetParent === null) {
    return false;
  }

  // Check if the element itself has "display: none" or "visibility: hidden" or "position: fixed"
  const style = window.getComputedStyle(element);
  return style.display !== "none" && style.visibility !== "hidden" && style.position !== "fixed";
}

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