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