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

Question

我想知道没有边距、边框和填充的元素的确切大小，只是最内框的宽度和高度(见下图)。
目前我知道函数“getBoundingClientRect”，它给出了包括边框和填充在内的大小。还有“客户端”属性，它返回一个包含填充的 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 包之类的。 :)