要素の幅を取得する offsetWidth

CSSの「width + padding + borderのピクセル単位の数値を取得する
下の四角はwidth: 300px; height: 100px; padding: 10px; margin: 10px; border:5px; である。

この四角のoffsetWidthは「」pxです。


[ソースコード]

<div id="sample_offsetWidth">
<p>この四角のoffsetWidthは「<span id="output"></span>」pxです。</p>
</div>
<input type="button" id="btn" value="offsetWidthを取得" />

<script type="text/JavaScript">
var btn = document.getElementById('btn');

btn.onclick = function(){
	var get_div = document.getElementById('sample_offsetWidth');
	var div_width = get_div.offsetWidth;
	var out = document.getElementById('output');
	out.innerHTML = div_width;
	
	btn.disabled = true;
}
</script>

インデックスにもどる