JavaScript는 어떻게 요소 오버플로를 감지할 수 있나요?

JavaScript로 요소 오버플로 감지

요소의 내용이 지정된 공간을 초과하는지 확인하기 위해 JavaScript는 편리한 접근 방식을 제공합니다. isOverflown() 함수는 요소에 수직, 수평 또는 둘 다에 오버플로가 있는지 확인하도록 설계되었습니다.

이 함수를 활용하려면 관심 있는 요소를 인수로 전달하면 부울 값이 반환됩니다. 넘쳤는지 여부를 나타냅니다.

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

이를 적용하는 방법은 다음과 같습니다. function:

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

이 예에서는 'demos' 클래스를 사용하여 모든 요소를 ​​반복하고 각 요소가 오버플로되었는지 확인한 다음 오버플로에 따라 빨간색 또는 녹색 테두리로 해당 메시지를 표시합니다. 상태입니다.

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