对于文本节点是否有与 getBoundingClientRect() 等效的方法?

2024-01-31

有没有办法获取文本节点的边界矩形?

getBoundingClientRect() 方法仅在元素上定义,并且父元素比实际文本节点大。


如果您不需要支持 IE8 或更早版本,您可以使用Range https://developer.mozilla.org/docs/Web/API/Range to 选择文本节点 https://developer.mozilla.org/docs/Web/API/range.selectNode,然后直接从Range.

示例(应该在此页面中工作):

var text = document.querySelector('#question-header .question-hyperlink').childNodes[0];
var range = document.createRange();
range.selectNode(text);
var rect = range.getBoundingClientRect();
range.detach(); // frees up memory in older browsers

您还可以重复使用Range如果您对多个文本节点执行此操作,则对象;只是确保不要打电话range.detach()直到你完成。 (笔记:Range.detach()现在是无操作DOM 标准 http://dom.spec.whatwg.org/#dom-range-detach,尽管某些较旧的浏览器在调用后仍会禁用该范围。)

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

对于文本节点是否有与 getBoundingClientRect() 等效的方法? 的相关文章

  • 修复 JSLint“意外的‘this’。”错误?

    我试图让以下代码成为符合 jslint 标准 http jslint com 但我陷入以下两个错误 本来应该看到一个声明 结果却看到了一个块 and 意想不到的 这个 我应该对我的代码进行哪些更改才能使 JSLint 满意 var pvAc
  • OpenLayers:放大或缩小后,被破坏的特征会重新出现

    我有一个 OpenLayers Bing 地图应用程序 可以显示危险废物站点 用户可以单击链接来切换地图上站点的子站点 当我通过调用层上的 destroyFeatures 来关闭子站点 它们是向量层上的点 时 它们会按预期消失 但是 如果我
  • Angular JS - 提交到 $http 时日期发生变化 - 时区问题

    我遇到一个奇怪的问题Date当它通过 http put 传递到 API 时发生变化 我怀疑时区问题 Datepicker 触发 ng change 事件 console log Tue Jun 10 2014 00 00 00 GMT 01
  • Cypress:在 JSON 响应中存根特定键

    我想在 Cypress 中存根以下响应 专门存根密钥ds version 可能的值为 0 1 或 2 每个值将在 UI 上显示不同的元素 fixtures user json email email protected cdn cgi l
  • 使用 Intern 测试自定义 JavaScript(不是 Node 模块)

    是否可以为自定义客户端创建和运行测试套件 JavaScript 不是作为 Node 模块创建的 应该如何 那么配置要改吗 Intern 配置中有 loader 部分 指定了 如果我做对了 将会加载的包 是否有必要 以某种方式在这里包含我的自
  • 检查复选框是否被选中? [复制]

    这个问题在这里已经有答案了 如何通过 jQuery 检查复选框是否被选中 我可以只向元素添加 ID 或类并执行此操作吗 if element val 1 do stuff if element is checked checkbox is
  • 从边界框确定文本坐标 a 的正确方法是什么?

    鉴于调用的结果imagettfbbox https www php net manual en function imagettfbbox php 什么是正确的 像素完美的点提供给imagettftext https www php net
  • JavaScript 对象镜像/单向属性同步

    出于安全目的 我需要一个 镜像 对象 也就是说 如果我创建对象 A 并浅克隆 A 的副本并将其称为 B 则每当 A 的属性发生更改时 我希望 B 自动更新自身以反映更改 但反之则不然 换句话说 单向属性同步 我的问题 是否已经存在我不知道的
  • Node 和 General 中的 MVC:模型如何与视图绑定?

    我从 node js 开始 正在制作一个简单的 MVC 框架 到目前为止 我已经有一个前端控制器 或 调度程序 如果你愿意的话 可以工作 路由通过调度程序配置模块进行 如图所示 我的问题在最后 紧接代码之后 另外 这是学习node的练习 请
  • WaveSurfer JS 无法在 Firefox 中为特定的 mp3 音频文件生成图表

    我们面临着在 Firefox 中使用 wavesurfer JS 对某些特定格式的 mp3 文件绘制音频可视化 图表 的问题 它总是给我们这样的错误 传递给decodeAudioData 的缓冲区包含未知的内容类型 但同一个文件在 chro
  • 为什么有人将(Apache mod_expires 参数)ExpiresByType 设置为“访问加 0 秒”?

    在审查答案时这个帖子 https stackoverflow com questions 9933012 how to use mod headers and mod expires to cache 我不明白为什么这里使用 0 秒作为最佳
  • 在 Typescript 中从基类创建子类的新实例[重复]

    这个问题在这里已经有答案了 我想创建新实例Child班级来自Base类方法 这有点复杂 但我会尽力解释 这是一个例子 class Base constructor clone Here i want to create new instan
  • Javascript - 对父母调用 super 父母?

    我在 Odoo 中定义了当前自定义 javascript 视图的扩展 openerp account move journal test function instance var t instance web t lt instance
  • JavaScript:嵌套循环?

    我想实现这样的动画 序列 动画以循环开始 想象一下car从 x1 移动到 x2 然后暂停 1 秒 然后再次播放动画 想象一下car从 x2 移动到 x3 等 the car循环是通过向汽车左侧添加 1px 来实现的 值 但我无法弄清楚嵌套循
  • 如何使表格单元格的最小宽度为 3 位数字?

    如何使表格中的每个单元格的最小宽度为 3 位数字且不会更大 现在我正在硬编码min width 但我不喜欢硬编码一个值 因为我将来可能想更改字体 如果需要Javascript也没关系 table border 1 tr td 1 td td
  • 主干集合排序

    我制作了我的第一个主干应用程序 但在集合排序方面遇到了一些问题 使用这个后 var SortedFriends MyFriends sortBy function friend return friend get uid console l
  • 如何制作实时jquery效果?

    我想制作一个实时提要阅读器 并且我想要一个解决方案 使新项目无需刷新页面即可出现 并且具有像friendfeed一样的滚动效果 你可以在这里看到我在说什么 http www vimeo com 4029954 http www vimeo
  • Google 折线图添加对象数组

    我有一个通过解析 JSON 字符串创建的对象数组 var measurementData Html Raw JsonConvert SerializeObject this Model Item1 var stringifiedData J
  • 响应覆盖 div 下的链接

    场景是这样的 我已经构建了一个顶部导航原型 它需要在其顶部有一个覆盖 透明 PNG 图像 目前它覆盖了大约 1 3 的链接 请看下面 有什么方法可以让前 1 3 的链接做出响应 即使有一个 div div 部分覆盖它们 覆盖层不会包含任何可
  • 在javascript中我们如何识别一个对象是Hash还是Array?

    我的 JSON 调用的输出可以是数组或哈希 我如何区分这两者 现代浏览器支持Array isArray obj method See MDN https developer mozilla org en US docs Web JavaSc

随机推荐