如何使用 JavaScript 检测 HTML 元素溢出？-css教程-PHP中文网

如何使用 JavaScript 检测 HTML 元素溢出？

Patricia Arquette

发布： 2024-12-26 22:55:15

原创

722 人浏览过

How Can I Detect HTML Element Overflow Using JavaScript?

检查元素的溢出状态

使用 HTML 元素时，确定其内容是否超出其指定边界通常至关重要。这使开发人员能够实现显示溢出指示器和相应调整布局等功能。

实现此目的的一种方法是利用 isOverflown() 函数，该函数评估 DOM 元素的溢出状态。它评估垂直和水平溢出条件，返回一个布尔值：

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中文网其他相关文章！