JavaScript는 어떻게 요소 오버플로를 감지할 수 있나요?-CSS 튜토리얼-php.cn

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

Barbara Streisand

풀어 주다： 2024-12-16 05:42:11

원래의

905명이 탐색했습니다.

How Can JavaScript Detect Element Overflow?

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!