JavaScript 如何偵測 HTML 元素內容溢出，即使有「overflow:visible」？

使用 JavaScript 檢查 HTML 元素中的內容溢位

當 HTML 元素的內容超出其定義的尺寸時，可能會導致溢位。雖然可以使用標準檢查來檢查可見溢出，但使用「overflow:visible」屬性檢查溢出可能會帶來挑戰。

JavaScript 解決方案

要解決這個問題，一個JavaScript 函數可以是使用：

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

   // If overflow is 'visible' or not set
   if (!curOverflow || curOverflow === "visible") {
      // Temporarily set overflow to 'hidden'
      el.style.overflow = "hidden";
   }

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

   // Restore original overflow style
   el.style.overflow = curOverflow;

   return isOverflowing;
}

用法：用法：

將有問題的HTML 元素作為參數傳遞給checkOverflow函數，以確定其內容是否溢出。如果存在溢出，則函數將傳回 true，否則傳回 false。

相容性：

此解決方案已在 Firefox 3 和 40、Internet Explorer 6 中測試和 Chrome 0.2.149.30。

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