JavaScript

A property that returns the visible width of an element in pixels, excluding scrollbars.

clientWidth [property]

clientWidth は、HTML要素の「見えている幅」を数値で取得するためのプロパティです。

ここでいう「見えている幅」とは、スクロールバーを除いたコンテンツ部分の幅のことです。

単位はピクセルで返され、小数点は含まず整数になります。

例えば、ある要素の横幅を知りたいときに次のように使えます。

const box = document.getElementById("sample");
console.log(box.clientWidth); // ピクセル単位の幅を取得

ポイント

• スクロールバーは幅に含まれない
• border（枠線）は含まれるが、marginは含まれない
• 数値は読み取り専用（変更はできない）
• 画面サイズやCSSの変更によって値は変わる