确定 HTML 元素的内容是否溢出

2023-12-01

我可以使用 JavaScript 来检查(无论滚动条如何)HTML 元素是否溢出其内容吗?例如,一个小而固定大小的长 div,overflow 属性设置为visible,并且元素上没有滚动条。


一般情况下,你可以比较一下client[Height|Width] with scroll[Height|Width]为了检测到这一点...但是当溢出可见时,这些值将是相同的。因此,检测例程必须考虑到这一点:

// Determines if the passed element is overflowing its bounds,
// either vertically or horizontally.
// Will temporarily modify the "overflow" style to detect this
// if necessary.
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;
}

在 FF3、FF40.0.2、IE6、Chrome 0.2.149.30 中测试。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

确定 HTML 元素的内容是否溢出 的相关文章

随机推荐

  • 选择图像并将大小调整为 72x72

    我从图库中选择了一张图像并对其进行了解码 现在我只想将该位图调整为标准 72x72 大小 以便用作个人资料照片 我搜索了很多 但没有任何效果 其中一些无缘无故地旋转了我的图像 其中一些使图像质量非常低 有那么难吗 EDIT Code Ove
  • 在 API 21 中以编程方式从 DatePicker 隐藏 Calendarview

    我遇到了与此线程相同的问题 Android Material Design 内联日期选择器问题 但我没有使用 XML 布局 而是以编程方式构建 DatePicker 这是我正在使用但不起作用的代码 DatePicker dpView new
  • 了解 getIntExtra() 参数

    Override protected void onCreate Bundle savedInstanceState super onCreate savedInstanceState setContentView R layout act
  • 保存保存为 csv 的 pandas 数据框的数据类型

    我希望能够为我的 df 保存 dtypes 当我下次读取 csv 时 我想证明一个 dtypes 数组 我尝试了以下方法 types dic df dtypes to dict np save dtypes npy types dic al
  • Laravel Slack 按需通知;在哪里设置 webhook?

    根据 Laravel 文档 我可以在控制器中执行按需通知 如下所示 use Notification use App Notifications TradeSuccessful trada data array title gt test
  • 所有操作后画布渲染一次

    一瞬间有点困惑 感谢任何帮助 我正在制作一个应用程序 它使用画布来渲染游戏板 我遇到了一个问题 即它不是最佳的 为每个小变化渲染画布 目前的结构如下 function renderCanvas calling for each row fu
  • AngularJS 指令:“templateUrl”不起作用,而“template”起作用

    我有一个名为的 AngularJS 指令 areaOne 当我使用template显示了模板 但是当我使用时templateUrl in area1 js 模板 HTML 不会呈现 我在这里缺少什么 服务器端 ASP NET MVC 5 客
  • 成员变量的结构化绑定

    在Visual Studio 2017中 打开后 std c 17 我可以 auto d1 d2 func return tuple where func return tuple 返回两个双精度值的元组 但是 如果A类有两个成员变量d1
  • 注释在 proguard 中无效

    我很难让混淆器根据注释来保存内容 在 Android 下 我有一个注释 com example Keep Target ElementType TYPE ElementType FIELD ElementType METHOD Elemen
  • 尝试通过安全透明方法“WebMatrix.WebData.PreApplicationStartCode.Start()”

    更新 mvc 4 到 mvc 5 相同 我启动了一个新的 mvc 4 项目 并在其中迁移了一个 mvc 3 项目 控制器 模型 脚本等 虽然现在一切都已编译 但我收到以下错误 尝试通过安全透明方法 WebMatrix WebData Pre
  • 按引用传递与按值传递

    所以我有这个代码 问题是 它输出什么 答案 5 如何使其输出10 答案 sum x 问题是我不明白为什么第一个问题的答案是5 当你制作sum x 时 它不应该用 x替换函数 所以 x 5 5 10吗 为什么答案是5 我真的不明白 有人向我解
  • pandas DF 中的分组连通图

    我有一个 pandas DF 其中每列代表一个节点 两列代表一条边 如下所示 import pandas as pd df pd DataFrame node1 2 4 17 17 205 208 node2 4 13 25 38 208
  • 在 RMarkdown 的 PDF 输出中旋转一页以上的表格

    我想在 PDF 输出中旋转一个宽表格 我碰到这个奇妙的问题 但我的桌子更长 当我复制 粘贴该问题中显示的示例之一时 使用 RMarkdown 效果很好 library kableExtra kable iris 1 5 format lat
  • Python3 有条件装饰?

    是否可以根据条件装饰函数 a la if she weight duck weight burn def witch pass 我只是想知道是否可以使用逻辑 当witch被调用 来判断是否要装饰witch with burn 如果没有 是否
  • 检测字符是否是字母

    给定一组单词 我需要将它们放入以单词的第一个字母为键的哈希中 我有words 其中键A Z和0代表数字和符号 我正在做类似的事情 var firstLetter name charAt 0 firstLetter firstLetter t
  • 直接传递获取属性名称和类型

    我问过类似的问题here And here 这是一个示例类型 public class Product public string Name get set public string Title get set public string
  • Delphi - 如何将 twebbrowser 中的选择放入数组中?

    我在我的 twebbrowser 中有以下选择
  • 在 sqlalchemy 的having子句中使用标签

    我尝试在 sqlalchemy 的having 子句中使用标签 但在使其正常工作时遇到问题 我正在尝试这样的事情 qry db session query Foo id Foo name Foo max stuff func sum Bar
  • Java获取Web资源的修改日期

    如何在 Java 中获取 Web 资源的修改日期 URL url new URL urlString URLConnection connection url openConnection connection connect What n
  • 确定 HTML 元素的内容是否溢出

    我可以使用 JavaScript 来检查 无论滚动条如何 HTML 元素是否溢出其内容吗 例如 一个小而固定大小的长 div overflow 属性设置为visible 并且元素上没有滚动条 一般情况下 你可以比较一下client Heig