javascript - css border-box がアクティブなときの offsetWidth と clientWidth を理解する

Question

私はこの質問から来ました:それぞれ、offsetWidth、clientWidth、scrollWidth、および -Height を理解する

これは標準ボックスモデルの場合と理解していますが、そうですか？

しかし、次のような場合はどうなりますか。

*{
  box-sizing: border-box;
}

現在、offsetWidth と clientWidth は同じですか? これは、このルールで常に発生しますか?

そしてどうpadding-boxですか？

Answer 1

自分で試してみてください: http://codepen.io/anon/pen/WvojWw

デフォルトでは に設定されてbox-sizing: border-boxいますが、スタイルでそれを変更するだけで、異なる結果が得られます。

ボタンをクリックすると計算さoffsetWidthれます。clientWidth

オフセット幅は余白を除くすべてに等しいため、 を使用するborder-boxと、指定した幅が得られます。

また、クライアントの幅は余白と境界線を除くすべてに等しいため、specified width - borders使用するときに取得するだけですborder-box。

オフセット幅

なしborder-box:

offsetWidth=width + padding + border

とborder-box:

offsetWidth=width

クライアント幅

なしborder-box:

clientWidth=width + padding

とborder-box:

clientWidth=width - border