element.offsetWidthは、「element」に指定した要素の幅を返すプロパティ。
このプロパティにおける幅とは、element.offsetParentプロパティで得られる要素を基準とした相対的幅のこと。具体的には、CSSの「width」「padding」「border」を足したピクセル単位の数値。CSSの「margin」は含まない。
構文
var $offsetWidth = $elementNodeReference.offsetWidth;
戻り値
指定した要素の幅。単位は、ピクセル。
CSSの「width」「padding」「border」を足したピクセル単位の数値。CSSの「margin」は含まない。
サンプル
id属性がsampleである要素の幅：
サンプルの動作について
「getOffsetWidth()」ボタンをクリックすると、「id属性がsampleである要素の幅：」の右横に「130px」と表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function getOffsetWidth() {
var $elementNodeReference = document.getElementById( "sample" );
var $offsetWidth = $elementNodeReference.offsetWidth;
document.getElementById( "sampleOutput1" ).innerHTML = $offsetWidth + "px";
}
</script>
function getOffsetWidth() {
var $elementNodeReference = document.getElementById( "sample" );
var $offsetWidth = $elementNodeReference.offsetWidth;
document.getElementById( "sampleOutput1" ).innerHTML = $offsetWidth + "px";
}
</script>
CSS
<style type="text/css">
#sample{
height: 100px;
width: 300px;
padding: 10px;
margin: 10px;
background-color: #fffee7;
border: 5px solid #dddddd;
border-radius: 5px;
}
</style>
#sample{
height: 100px;
width: 300px;
padding: 10px;
margin: 10px;
background-color: #fffee7;
border: 5px solid #dddddd;
border-radius: 5px;
}
</style>
HTML
<div id="sample">
<button onclick="getOffsetWidth();">getOffsetWidth()</button>
<p>id属性がsampleである要素の幅：<span id="sampleOutput1"></span></p>
</div>
<button onclick="getOffsetWidth();">getOffsetWidth()</button>
<p>id属性がsampleである要素の幅：<span id="sampleOutput1"></span></p>
</div>