例
高さと幅を取得<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";TXTの結果は次のようになります。
Height with padding and border: 280px
Width with padding and
border: 430px »それを自分で試してみてください もっと"Try it Yourself"以下の例。
定義と使用法
offsetWidthプロパティが閲覧可能なパディング、ボーダーやスクロールバーなどのピクセル単位での要素の幅ではなく、マージンを返します。
理由は"viewable"要素の内容は、要素の実際の幅よりも広くなっている場合は、のみ表示幅を返します。このプロパティがあるためワードが指定されているが、ある(See "More Examples") 。
注意：このプロパティを理解するために、あなたは理解しなければならないCSSボックスモデルを 。
ヒント：このプロパティは、しばしば一緒に使用されているoffsetHeightプロパティ。
ヒント：使用clientHeightとclientWidthだけパディングを含め、要素の閲覧可能な高さと幅を返すためのプロパティを。
ヒント：CSSの使用、要素にスクロールバーを追加するには、オーバーフロープロパティを。
このプロパティは読み取り専用です。
ブラウザのサポート
| プロパティ | |||||
|---|---|---|---|---|---|
| offsetWidth | はい | はい | はい | はい | はい |
構文
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";TXTの結果は次のようになります。
Height with padding: 270px
Height with padding and border:
280px
Width with padding: 420px
Width with padding and
border: 430px »それを自分で試してみてください 例
我々は要素にスクロールバーを追加すると、この例では、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";TXTの結果は次のようになります。
Height with padding: 249px
Height with padding, border and
scrollbar: 280px
Width with padding: 399px
Width with padding, border and scrollbar: 430px »それを自分で試してみてください