offsetHeightとは
- ここで説明するoffsetHeight とは次の語句からなるjavascriptのプロパティです。
- offset
- 読み: オフセット
意味: 埋め合わせる、相殺する、補う、補正、補正値 - height
- 読み: ハイト
意味: 高さ
offsetHeightプロパティの概要
このプロパティは、要素がブラウザで表示される全垂直幅の値を整数のピクセル値で取得することができます。 ここで言っている全垂直幅とは、境界線とパディングとコンテンツボックスの垂直幅を合計した値のことです。 なお、水平スクロールバーが表示されている場合は、その垂直幅も含みます。
このプロパティは読み取り専用です。
構文
サンプルを見る前に構文を確認しておきます。
var intElementOffsetHeight = element.offsetHeight;サンプルコードと実行結果
ここでは、予め div要素 にCSSで要素の表示幅を設定しています。 この要素のoffsetHeightの値を要素のコンテンツに書き出すようにしてみました。
サンプルコード: CSS
<style>
#idDiv{
font-size: 2em;
box-sizing: content-box;
background-clip: content-box;
background-color: ##lightblue;
border-color: ##gray;
border-style: solid;
border-width: 5px;
margin: 3px;
padding: 10px;
height: 80px;
}
</style>
- 02: box-sizing (content-box は初期値です。これは height の設定値がコンテンツボックスの高さに適用されます。)
- 08: border-width (境界線の幅です。5pxに設定しています。)
- 09: margin (要素の外周の余白です。3pxに設定しています。)
- 10: padding (要素の内周の余白です。10pxに設定しています。)
- 11: height (ここではコンテンツボックスの垂直幅です。80pxに設定しています。)
サンプルコード: HTML
<body>
<div id="idDiv"></div>
</body>
- 02: div (ブロックコンテナー要素です。この要素の全幅の値を取得します。)
サンプルコード: script
<script>
let elmDiv = document.getElementById("idDiv");
elmDiv.innerText = elmDiv.offsetHeight;
</script>
- 02: elmDiv (識別子=idDivの要素をElementオブジェクトとして取得します。)
- 03: .innerText = .offsetHeight (elmDivのinnerTextにoffsetHeightの値を代入します。)
結果を見ると という値が要素のコンテンツに書き出されています。 これはCSSで設定した (border-width×2 + padding×2) + height = offsetHeight という結果になっていることが分かります。