JavaScript 如何在'overflow:visible”时检测 HTML 元素内容溢出？

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