Question

例如：

<div>
<span style="font-size: 20pt" id="BBB">Hello</span> 
<span style="font-size: 5pt; vertical-align: middle;" id="AAA">World</span> 
</div>

从BBB元素中可以轻松获得线条边界，因为BBB是线条的较高元素。它的offsetTop和offsetHeight属性是行边界。

但是如何从元素AAA中获取行边界？

我可以直接获取该信息，还是必须遍历该行的元素？

Answer 1

使用getComputedStyle获取渲染元素的所有计算css属性并选择所需内容。

Window.getComputedStyle（）方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。单个CSS属性值可以通过对象提供的API访问，也可以通过CSS属性名称进行索引。

我注意到在代码段中没有所有属性所以请检查Fiddle

const element = document.querySelector('#AAA');
const computed = window.getComputedStyle(element);

[...computed].forEach((e) => {
  console.log(e, ' : ', computed.getPropertyValue(e));
});

<div>
  <span style="font-size: 20pt">Hello </span>
  <span style="font-size: 5pt; display: middle;" id="AAA">World </span>
  <span style="font-size: 10pt">etc </span>
  <span style="font-size: 10pt">etc</span>
</div>

Answer 2

没有API来处理行框。

有相关的问题： How can I count text lines inside an DOM element? Can I?

那里没有奇迹。

如何获取内联元素的当前上下边界？

2 个答案: