测量Dart中Html元素的宽度和高度

Question

我想知道没有边距，边框和填充的元素的确切大小，只是最内框的宽度和高度（见下图）。

目前我知道函数“getBoundingClientRect”，它给出了包括边框和填充在内的大小。还有“client”属性，它返回一个包含填充的Rect。

所以问题是，如何在没有填充的情况下获得宽度和高度？

Answer 1

不幸的是，DOM没有提供这样的功能。这就是为什么像jQuery，ExtJS等大多数库提供帮助方法的原因。他们基本上parse the style并弄清楚了。

以下是一个例子：

<div style="width: 100px; height: 100px; padding: 5px; border: 1px solid #000"></div>

int getWidth(Element element) {
  var paddingLeft = element.style.paddingLeft.replaceAll('px', ''); // You may want to deal with different units.
  var paddingRight = element.style.paddingLeft.replaceAll('px', '');

  return element.clientWidth - int.parse(paddingLeft) - int.parse(paddingRight);
}

用法：

print(getWidth(query('#test')));

结果：

100

注意：

• 您可以考虑处理不同类型的单位（px，pt，em，...）。
• box-sizing属性也具有您可能想要检查的效果。

如果我或你碰巧找到了时间，也许会发布一个Pub包或其他东西。 ：）

Answer 2

此pub包可以预测DOM中尚不存在的文本（没有边距，边框和填充）的大小：https://pub.dartlang.org/packages/textent

Answer 3

尝试相对最近推出的Element.contentEdge，这似乎正是您想要的。

来自Google员工的

This评论列出了一些已添加的更相关的方法。请注意，至少其中一些仍然在API文档中标记为 Experimental ，但它们仍然有用。