HTML DOMoffsetWidthプロパティ
例
パディングとボーダーを含む<div>要素の高さと幅を取得します。
var elmnt = document.getElementById("myDIV");
var txt = "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
offsetWidthプロパティは、パディング、境界線、スクロールバーを含む要素の表示可能な幅をピクセル単位で返しますが、マージンは返しません。
「viewable」という単語が指定されている理由は、要素のコンテンツが要素の実際の幅よりも広い場合、このプロパティは表示されている幅のみを返すためです(「その他の例」を参照)。
注:このプロパティを理解するには、 CSSボックスモデルを理解する必要があります。
ヒント:このプロパティは、 offsetHeightプロパティと一緒に使用されることがよくあり ます。
ヒント: clientHeightプロパティとclientWidthプロパティを使用して 、要素の表示可能な高さと幅を返します。これには、パディングのみが含まれます。
ヒント:要素にスクロールバーを追加するには、CSS オーバーフロープロパティを使用します。
このプロパティは読み取り専用です。
ブラウザのサポート
Property | |||||
---|---|---|---|---|---|
offsetWidth | Yes | Yes | Yes | Yes | Yes |
構文
element.offsetWidth
技術的な詳細
戻り値: | パディング、境界線、スクロールバーなど、要素の表示可能な幅をピクセル単位で表す数値。 |
---|
その他の例
例
この例は、clientHeight / clientWidthとoffsetHeight / offsetWidthの違いを示しています。
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";
例
この例は、要素にスクロールバーを追加した場合のclientHeight / clientWidthとoffsetHeight / offsetWidthの違いを示しています。
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";