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

Question

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

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

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

Answer 1

不幸的是，DOM 不提供这样的功能。这就是为什么大多数库（如 jQuery、ExtJS 等）都提供辅助方法的原因。他们本质上是解析风格并找出答案。

这是一个例子：

<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 员工的这条评论列出了一些更相关的方法，这些方法也已添加。请注意，至少其中一些在 API 文档中仍被标记为Experimental，但它们仍然很有用。