如何可靠地偵測 HTML 元素中的溢出內容？

偵測HTML 元素中的溢位內容

確定HTML 元素的內容是否超出其邊界可能是設計網頁時的一項常見任務。但是，當溢位設定為可見時，比較客戶端尺寸與捲動尺寸的標準方法並不總是有效，因為值將相同。

為了解決此問題，提供的 JavaScript 函數會暫時修改 CSS溢位設定為隱藏。這使我們能夠準確地檢測元素是否真正超出了其邊界，無論是垂直還是水平。程式碼如下：

function checkOverflow(el) {
   var curOverflow = el.style.overflow;

   if ( !curOverflow || curOverflow === "visible" )
      el.style.overflow = "hidden";

   var isOverflowing = el.clientWidth < el.scrollWidth 
      || el.clientHeight < el.scrollHeight;

   el.style.overflow = curOverflow;

   return isOverflowing;
}

此函數已在主流瀏覽器中進行了測試，包括 Firefox、Internet Explorer 和 Chrome，確保其跨平台一致工作。透過利用這種技術，您現在可以輕鬆檢查 HTML 元素的內容是否溢出其分配的空間，無論滾動條可見性如何。

以上是如何可靠地偵測 HTML 元素中的溢出內容？的詳細內容。更多資訊請關注PHP中文網其他相關文章！