オブジェクトの位置と大きさを取得する方法

このページをソーシャルブックマークしてみんなに紹介する！ -->

オブジェクトの位置と大きさを取得

ホームページ内にあるオブジェクト（ボタンなど）の位置を取得するには offsetLeft 、offsetTop 、大きさを取得するには offsetWidth 、offsetHeight で取得できます。

/****************************************************************
* 機　能：オブジェクトの位置と大きさを取得
* 引　数：オブジェクト
****************************************************************/
function getObjSize(obj) {
var x = oj.offsetLeft;
var y = oj.offsetTop;
var w = oj.offsetWidth;
var h = oj.offsetHeight;
}

【呼び出し例】

<input type="button" name="abc" value="abc" onClick="getObjSize(this)">

位置調整

Firefox の場合は上記で問題ないのですが、IE の場合余白部分が無視される為誤差が出てしまいます。
body { margin: 0px; } のように余白をなくしておけば問題ありませんが、余白が設定されていた場合は誤差が出てしまいます。
また、設定がなくてもデフォルトで余白があるので、これも誤差が出ます。

正確な位置を取得する関数

/****************************************************************
* 機　能：オブジェクトの左位置を取得
* 引　数：オブジェクト
* 戻り値：左からのピクセル数
****************************************************************/
function GetLeft(oj){
var px = 0;
while(oj){
px += oj.offsetLeft;
oj = oj.offsetParent;
}
return px;
}
/****************************************************************
* 機　能：オブジェクトの上位置を取得
* 引　数：オブジェクト
* 戻り値：上からのピクセル数
****************************************************************/
function GetTop(oj){
var px = 0;
while(oj){
px += oj.offsetTop;
oj = oj.offsetParent;
}
return px;
}

スポンサードリンク

< 戻る