HTMLElement.offsetHeight - 要素のborder edgeの高さ
offsetHeightは、HTMLElementのプロパティです。要素のborder edgeの高さを返します。具体的には、border-topの上端からborder-bottomの下端までの幅です。子要素が、自身より広いスクロールが必要なコンテンツでも無視されます。このプロパティは読み取り専用です。
概要
- 名前
- offsetHeight
- 所属
- HTMLElement
- IDL
readonly attribute long offsetHeight;
- 仕様書
- https://drafts.csswg.org/cssom-view/#dom-htmlelement-offsetheight
説明
要素のborder-topの上端からborder-bottomの下端までの幅を表すピクセル単位の数値。
チュートリアル
取得はできますが、代入はできません。
HTML
<div id="hoge"></div>
CSS
div#hoge {
height: 100px ;
padding: 20px ;
border: 10px solid #888 ;
}
JavaScript
var element = document.getElementById( "hoge" ) ;
var a = element.offsetHeight ; // 100 + (20 * 2) + (10 * 2) = 160
デモ
HTMLElement.offsetHeightを取得するデモです。
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<html>
<head>
<style>
div#hoge {
height: 100px ;
padding: 20px ;
border: 10px solid #888 ;
width: 100px ;
background-color: red ;
}
</style>
</head>
<body>
<div id="hoge"></div>
<hr>
<script>
var element = document.getElementById( "hoge" ) ;
console.log( element.offsetHeight ) ;
document.body.appendChild( new Text( element.offsetHeight ) ) ;
</script>
</body>
</html>
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
● | ● | ● | ● | ● | ● | ● | ● |
関連記事
- 配列から空要素を取り除く
- 配列の中から空文字の要素を取り除くには、array_filter()とstrlen()を組み合わせます。
- 要素の位置座標を取得する
- 指定した要素の位置座標を取得します。
- スクロール量を取得する
- スクロール量を取得するには、window.pageYOffsetを参照しましょう。
- HTMLElement.offsetTop
- offsetTopは、HTMLElementのプロパティです。包含要素(offsetParent)からの、垂直方向のオフセット距離を返します。具体的には、包含要素のpadding-topの上端から、要素のborder-topの上端までの幅です。このプロパティは読み取り専用です。