以编程方式查找html页面的呈现文本之间的距离

Question

示例：<span style="padding-right:10px;">left text</span><span>right</span>

在上面，“左侧文本”和“右侧”之间的距离在浏览器渲染后为10px。

所以我的应用程序会接受一个html文件和2个变量（html文件中存在的字符串），然后找到2个字符串之间的水平距离（以像素为单位）。

可能吗？ 我猜我将不得不修改像webkit这样的开源引擎来实现这一目标。对？或者有更简单的方法吗？ CSS规则的解析页面......会起作用吗？

如果是它的webkit，那会有多难？我需要掌握哪些语言？我只知道php（C，C＃，java）

由于

Answer 1

使用Javascript。

这样你就可以找到元素的属性，然后比较它们以获得它们的距离。

例如，您可以使用javascript来获取element.left，element.width和element2.left。然后，您可以通过获取element2.left - （element.left + element.width）。

来找到距离

Answer 2

stackoverflow中的以下question建议您可以找到元素与文档左上角之间的距离（使用javascript和jQuery）。

要找到两个元素之间的距离，我会假设您可以执行以下操作：

 var el1offset =  $("#element1id").offset();
 var el2offset =  $("#element2id").offset();
 var distanceTop = Math.abs(el1offset.top-el2offset.top);
 var distanceLeft = Math.abs(el1offset.left-el2offset.left);
 var distance = Math.sqrt(distanceTop*distanceTop+distanceLeft*distanceLeft);