JavaScript를 사용하여 HTML 요소 오버플로를 어떻게 감지할 수 있습니까?

요소의 오버플로 상태 검사

HTML 요소로 작업할 때 해당 콘텐츠가 지정된 경계를 넘어 확장되는지 확인하는 것이 필수적인 경우가 많습니다. 이를 통해 개발자는 오버플로 표시기 표시 및 그에 따른 레이아웃 조정과 같은 기능을 구현할 수 있습니다.

이를 달성하는 한 가지 접근 방식은 DOM 요소의 오버플로 상태를 평가하는 isOverflown() 함수를 활용하는 것입니다. 수직 및 수평 오버플로 조건을 모두 평가하여 부울 값을 반환합니다.

function isOverflown(element) {
  return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
}

이 함수는 다양한 시나리오에서 사용할 수 있습니다. 예를 들어 언급된 사용 사례에서는 이를 활용하여 높이 제한이 300px인 요소에 해당 높이를 초과하는 콘텐츠가 있는지 여부를 식별할 수 있습니다. 오버플로가 감지되면 "추가" 버튼을 표시할 수 있습니다. 그렇지 않으면 숨깁니다.

isOverflown()의 유틸리티를 시연하려면 다음 JavaScript 스니펫을 고려하세요.

var elements = document.getElementsByClassName('demos');
for (var i = 0; i < elements.length; i++) {
  var element = elements[i];
  element.style.borderColor = (isOverflown(element) ? 'red' : 'green');
  console.log("Element #" + i + " is " + (isOverflown(element) ? '' : 'not ') + "overflown.");
}

이 데모의 CSS:

.demos {
  white-space: nowrap;
  overflow: hidden;
  width: 120px;
  border: 3px solid black;
}

HTML :

<div class='demos'>This is some text inside the div which we are testing</div>
<div class='demos'>This is text.</div>

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