如何使用 JavaScript 檢測 HTML 元素溢出？

檢查元素的溢位狀態

使用 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中文網其他相關文章！