8

余白、境界線、パディングのない要素の正確なサイズ、最も内側のボックスの幅と高さだけを知りたいです（下の画像を参照）。

現在、境界線とパディングを含むサイズを与える関数「getBoundingClientRect」を知っています。パディングを含むRectを返す「client」プロパティもあります。

だから問題は、パディングなしで幅と高さを取得するにはどうすればよいですか？

CSSボックスモデル

4

3 に答える 3

9

残念ながら、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パッケージか何かをリリースしてください。:)

于 2013-03-26T20:02:37.783 に答える
2

このpubパッケージは、DOMにまだ存在しないテキストのサイズ（余白、境界線、パディングなし）を予測できます： https ：//pub.dartlang.org/packages/textent

于 2014-08-05T13:36:51.877 に答える
1

比較的最近導入されたElement.contentEdgeを試してみてください。これは、まさにあなたが望むもののようです。

Googleの従業員からのこのコメントには、さらに追加された関連メソッドがいくつかリストされています。それらの少なくとも一部は、APIドキュメントでまだ実験的としてマークされていますが、それでも役立つ可能性があることに注意してください。

于 2014-11-02T10:51:56.840 に答える