JavaScript 如何在「overflow:visible」時偵測 HTML 元素內容溢出？-js教程-PHP中文網

JavaScript 如何在「overflow:visible」時偵測 HTML 元素內容溢出？

Patricia Arquette

發布： 2024-11-26 09:20:10

原創

396 人瀏覽過

How Can JavaScript Detect HTML Element Content Overflow When `overflow: visible`?

如何使用JavaScript 檢測HTML 中的元素內容溢出

您遇到了顯示溢出內容的HTML 元素，儘管其具有溢出屬性設定為“可見”且缺少捲軸。有沒有辦法使用 JavaScript 來確定是否存在這種溢出？

解決問題

通常，人們會比較元素的 clientHeight 和scrollHeight（或 clientWidth 和scrollWidth）來偵測溢位。然而，具有“可見”設定的溢出提出了挑戰。

解決方案：暫時修改溢位屬性

為了解決這個問題，需要一個偵測程式。以下函數將「overflow」樣式暫時修改為「hidden」並檢查是否溢出：

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 3 上測試、Firefox 40.0.2、Internet Explorer 6 和Chrome 0.2.149.30。

以上是JavaScript 如何在「overflow:visible」時偵測 HTML 元素內容溢出？的詳細內容。更多資訊請關注PHP中文網其他相關文章！