问题如何使用javascript获取HTML文本节点的位置和大小？

例如，

<div style="width:100px;text-align:center">text</div>

我想得到的位置和大小 text 文本节点，而不是它 div 包装。可能吗？

6453

2018-04-25 07:49

起源

您可以获得div位置，然后您将必须添加任何顶部和左侧填充和边框。 - Asken

@ user125697： text 是一个节点，而不是一个元素。它不重复那个问题。 - benjaminchanming

这个可以帮到你 - anpsmn

@Asken：如何获取填充和边框信息？我无法使用Chrome的检查器找到其填充和边框值。 - benjaminchanming

这不是重复的。查找文本节点的位置/尺寸与使用元素执行相同操作是一个不同的问题。 - Tim Down

答案:

在现代浏览器（最近的Mozilla，WebKit和Opera）中你可以使用 getClientRects() DOM范围的方法包含文本节点。

var textNode = document.getElementById("wombat").firstChild;
var range = document.createRange();
range.selectNodeContents(textNode);
var rects = range.getClientRects();
if (rects.length > 0) {
    console.log("Text node rect: ", rects[0]);
}

<div id="wombat">Wombat</div>

16

2018-04-25 09:21

此代码是否适用于旧浏览器。如果没有，旧浏览器的解决方案。 - Domezchoc

@Domezchoc：哪些旧浏览器？有一个解决方案使用 TextRange 在IE中，只要你的文本节点是元素的唯一子节点就很容易。否则，仍然可以创建TextRange，但还有更多工作要做。 - Tim Down

我的意思是IE，我明白了。首先，我需要找到TextRange然后找到getClientRects。谢谢 - Domezchoc

这已经停止在IOS 11中工作了。 - user984003

@ user984003：该代码段似乎在iOS 11中的Safari上运行正常。 - Tim Down

热门问题

不使用eval / new函数的JavaScript模板库当涉及内部类时，Java继承如何工作 .NET Windows服务的奇怪问题在.ipa或.app下查找App ID 快速入门XSLT参考[关闭] 如何找出Android应用程序中未使用的资源 Ruby中并发的同步方法[重复] 将std :: chrono :: system_clock :: time_point转换为struct timeval并返回 Google Drive API V3（javascript）更新文件内容 Bootstrap 3.0 - 将元素推到底部受密码保护的.NET ClickOnce部署？如何用postgresql安装wordpress coq Set或Type如何成为命题硒滚动元素进入（中心）视图在Spring Transaction JUnit测试中自动装配Hibernate会话的正确方法 Git的Dockerfile策略如何在FOS_PICKFOLDER中使用IFileDialog，同时仍在对话框中显示文件名在Firefox扩展中复制Google Chrome浏览器操作弹出效果 CakePHP找到MAX 芹菜 - 完成任务的召唤功能从使用fmemopen创建的流中读取宽字符 .NET是否为每个程序集创建一个字符串实习池？ DefaultModelBinder不绑定嵌套模型 Navigator.MediaDevices.getUserMedia（）使用了哪些相机通信标准？选择命名空间名称时应该知道什么？ cout Swagger Codegen CLI Java客户端 - 如何正确使用它一个很好的哈希函数用于采访整数，字符串？ Maven 3 ciManagement配置的目的是什么？如何通过语言文化获取代码页？