SYNCERのロゴ
アイキャッチ画像

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>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年9月23日 (土)
コンテンツを公開しました。