在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包或其他東西。 :)

Answer 2

此酒吧包可以預測文本（無空白，邊框和填充物）的尚不在DOM存在大小：https://pub.dartlang.org/packages/textent

Answer 3

嘗試最近比較出臺Element.contentEdge，似乎正是你想要的。

This來自Google員工的評論列出了一些也已添加的更多相關方法。請注意，它們中的至少一些在API文檔中仍標記爲實驗，但它們仍然可能有用。