obj.style.height、obj.style.widthで高さ、幅を取得する場合、スタイル設定していないと高さを取得することができません。
またborderの太さやpaddingによって影響を受けた長さが入っていないため、実質的な幅、高さとは異なります。
getBoundingClientRect()メソッドは、スタイル設定をしていなくても、テーブルや、画像などあらゆる要素の座標、幅、高さを取得することができます。
DEMO
解説
<script language="javascript" type="text/javascript">
onload = function(){
var nodeList;
nodeList = document.getElementsByTagName('div');
for(var i=0; i<nodeList.length; i++){
nodeList[i].onclick=getObjInfo;
}
nodeList = document.getElementsByTagName('img');
for(var i=0; i<nodeList.length; i++){
nodeList[i].onclick=getObjInfo;
}
}
function getObjInfo(){
var rect = this.getBoundingClientRect();
var hgt;
var wdh;
if(rect.height){
hgt = rect.height;
}else{
hgt = rect.bottom - rect.top;
}
if(rect.width){
wdh = rect.width;
}else{
wdh = rect.right - rect.left;
}
alert('X=' + rect.left + ' Y=' + rect.top + ' height=' + hgt + ' width=' + wdh);
}
</script>
対象要素のメソッドgetBoundingClientRect()を実行して、取得したオブジェクトの中に情報があります。
width、heightは一部のブラウザで対応していないので、rigtht、left、bottom、topを使用して計算します。
注意）このオブジェクトの情報をjavascriptで変更しても値は変更されません。変更するときはstyle属性を変更する必要があります。
注意2)スタイルの設定値と異なり、ボーダーの幅やpadding値も含まれた値がでます。
PR
