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

Question

我想知道没有边距,边框和填充的元素的确切大小,只是最内框的宽度和高度(见下图).

目前我知道函数"getBoundingClientRect",它给出了包括边框和填充在内的大小.还有"client"属性返回包含填充的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包或其他东西.:)