HTML DOM Element scrollWidth属性

定義と使用法

scrollWidth 属性は、パディングを含む要素の幅をピクセル単位で返しますが、ボーダーやスクロールバー、マージンは含まれません。

scrollWidth 属性は読み取り専用です。

注：scrollWidth および scrollHeight 両方とも、要素の全体の高さと幅を返します（オーバーフローによる不可視部分を含む）：

も参照してください：

scrollHeight属性

CSS overflow 属性

例

例1

要素の高さと幅を取得します（paddingを含む）：

const element = document.getElementById("content");
let x = element.scrollHeight;
let y = element.scrollWidth;

自分で試してみてください

例2

padding、border、scrollbarがscrollWidthとscrollHeightにどのように影響するか：

const element = document.getElementById("content");
let x = element.scrollHeight;
let y = element.scrollWidth;

自分で試してみてください

例3

scrollHeightとscrollWidthから返される値を使用して、要素の高さと幅を設定します：

element.style.height = element.scrollHeight + "px";
element.style.width = element.scrollWidth + "px";

自分で試してみてください

構文

element.scrollWidth

返り値

タイプ 説明
数字 要素の幅をピクセル単位で示します。

ブラウザのサポート

すべてのブラウザがサポートしています element.scrollWidth：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
サポート サポート サポート サポート サポート サポート