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中文网其他相关文章！