'overflow: visible'일 때 JavaScript는 HTML 요소 콘텐츠 오버플로를 어떻게 감지할 수 있습니까?

JavaScript를 사용하여 HTML에서 요소 콘텐츠 오버플로를 감지하는 방법

오버플로 속성이 있음에도 불구하고 콘텐츠가 넘쳐나는 HTML 요소를 발견했습니다. "표시"로 설정되어 있고 스크롤바가 없습니다. JavaScript를 사용하여 이 오버플로가 존재하는지 확인할 수 있는 방법이 있습니까?

문제 해결

일반적으로 요소의 clientHeight와 scrollHeight(또는 clientWidth와 scrollWidth)를 비교합니다. 오버플로를 감지합니다. 그러나 오버플로에 "표시" 설정이 있으면 문제가 발생합니다.

해결책: 오버플로 속성 임시 수정

이를 설명하려면 감지 루틴이 필요합니다. 다음 기능은 "오버플로" 스타일을 "숨김"으로 일시적으로 수정하고 오버플로를 확인합니다.

function checkOverflow(el) {
   var curOverflow = el.style.overflow;

   if ( !curOverflow || curOverflow === "visible" ) {
      el.style.overflow = "hidden";
   }

   var isOverflowing = el.clientWidth < el.scrollWidth || el.clientHeight < el.scrollHeight;

   el.style.overflow = curOverflow;

   return isOverflowing;
}

지원되는 브라우저

이 기능은 Firefox 3에서 테스트되었습니다. , Firefox 40.0.2, Internet Explorer 6 및 Chrome 0.2.149.30.

위 내용은 'overflow: visible'일 때 JavaScript는 HTML 요소 콘텐츠 오버플로를 어떻게 감지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!