レッスンに戻る

違い:CSSのwidthとclientWidth

重要度: 5

getComputedStyle(elem).widthelem.clientWidthの違いは何ですか?

少なくとも3つの違いをあげてください。多いほど良いです。

違い

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