JavaScript 如何偵測元素溢出？

使用 JavaScript 偵測元素溢位

要確定元素的內容是否超出其指定空間，JavaScript 提供了一種便捷的方法。 isOverflown() 函數旨在確定元素是否在垂直、水平或兩者上都有溢出。

要使用此函數，只需將感興趣的元素作為參數傳遞，它將傳回一個布林值指示它是否已溢出。

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

以下是應用此方法的方法函數：

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