レッスンに戻る

違い: CSS 幅 vs clientWidth

重要性: 5

getComputedStyle(elem).widthelem.clientWidth の間の違いはなんでしょうか?

少なくとも 3つの差異を挙げてください。多い方が良いです。

違い:

  1. clientWidth は数値で、getComputedStyle(elem).width は末尾に px がついた文字列を返します。
  2. getComputedStyle はインライン要素の場合、"auto" のような非数値の幅を返す場合があります。
  3. clientWidth は要素の内部のコンテンツ領域にパディングを加えたものである一方、CSS幅(標準の box-sizingの場合)は パディングなし の内部コンテンツ領域です。
  4. もしスクロールバーがあり、ブラウザはそのスペースを確保している場合、一部のブラウザは CSS幅からそのスペースを引き(コンテンツのためにはそれ以上使えないからです)、一部のブラウザは引きません。clientWidth プロパティは常に同じです: 確保されている場合、スクロールバーサイズは引かれます。