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

HTMLElement.offsetWidth - 要素のborder edgeの横幅

offsetWidthは、HTMLElementのプロパティです。要素のborder edgeの横幅を返します。具体的には、border-leftの左端からborder-rightの右端までの幅です。子要素が、自身より広いスクロールが必要なコンテンツでも無視されます。このプロパティは読み取り専用です。

概要

名前
offsetWidth
所属
HTMLElement
IDL
readonly attribute long offsetWidth;
仕様書
https://drafts.csswg.org/cssom-view/#dom-htmlelement-offsetwidth

説明

要素のborder-leftの左端からborder-rightの右端までの幅を表すピクセル単位の数値。

チュートリアル

取得はできますが、代入はできません。

HTML

<div id="hoge"></div>

CSS

div#hoge {
	width: 100px ;
	padding: 20px ;
	border: 10px solid #888 ;
}

JavaScript

var element = document.getElementById( "hoge" ) ;
var a = element.offsetWidth ;	// 100 + (20 * 2) + (10 * 2) = 160

デモ

HTMLElement.offsetWidthを取得するデモです。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
div#hoge {
	width: 100px ;
	padding: 20px ;
	border: 10px solid #888 ;

	background-color: red ;
}
</style>
</head>
<body>
<div id="hoge"></div>

<hr>
<script>
var element = document.getElementById( "hoge" ) ;

console.log( element.offsetWidth ) ;
document.body.appendChild( new Text( element.offsetWidth ) ) ;
</script>
</body>
</html>

サポート状況

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