Javascriptはページ要素の絶対位置を取得します.
1465 ワード
一、概念の絶対位置:ページ要素の左上隅はページ全体の左上隅の座標に対して
相対位置:ブラウザウィンドウの左上隅に対する座標
二、取得方法
1、各要素にはoffset Topとoffset Left属性があり、この元素の左上角と親容器の左上角の距離を表しています.2、各要素にはoffset Part属性があります.offset Part属性は、オブジェクトの参照を返します.このオブジェクトは、offsetPartentを呼び出す要素から一番近い(階層を含む中で最も近い)もので、CSSの位置付けが行われているコンテナ要素です.このコンテナ要素がCSSポジショニングされていない場合、offset Partent属性の値はルート要素(標準互換モードでは)の参照となります.コンテナ要素のstyle.displayが「none」に設定されている場合、offset Partent属性はnullに戻ります.
したがって、ページ要素のoffset Partを循環的に取得し、offset Topとoffset Leftを徐々に蓄積するだけで、この要素の絶対座標が得られます.
三、コード
iframeでは、offsetPartオブジェクトが親容器(同様にテーブルもあります)とは限らないので、getElement Abs Pos関数により、ページ要素の絶対位置ではなく、下図のようになります.
ページ要素の絶対位置をiframeで正確に取得するコードを以下に示します.
相対位置:ブラウザウィンドウの左上隅に対する座標
二、取得方法
1、各要素にはoffset Topとoffset Left属性があり、この元素の左上角と親容器の左上角の距離を表しています.2、各要素にはoffset Part属性があります.offset Part属性は、オブジェクトの参照を返します.このオブジェクトは、offsetPartentを呼び出す要素から一番近い(階層を含む中で最も近い)もので、CSSの位置付けが行われているコンテナ要素です.このコンテナ要素がCSSポジショニングされていない場合、offset Partent属性の値はルート要素(標準互換モードでは)の参照となります.コンテナ要素のstyle.displayが「none」に設定されている場合、offset Partent属性はnullに戻ります.
したがって、ページ要素のoffset Partを循環的に取得し、offset Topとoffset Leftを徐々に蓄積するだけで、この要素の絶対座標が得られます.
三、コード
function getElementAbsPos(e)
{
var t = e.offsetTop;
var l = e.offsetLeft;
while(e = e.offsetParent)
{
t += e.offsetTop;
l += e.offsetLeft;
}
return {left:l,top:t};
}
四、問題iframeでは、offsetPartオブジェクトが親容器(同様にテーブルもあります)とは限らないので、getElement Abs Pos関数により、ページ要素の絶対位置ではなく、下図のようになります.
ページ要素の絶対位置をiframeで正確に取得するコードを以下に示します.
/**
* @param e
* @param arrParentid e iframe
* @param isID arrParentid iframe id object
*/
function getElementAbsPos(e,arrParentid,isID)
{
var t = e.offsetTop;
var l = e.offsetLeft;
while(e = e.offsetParent)
{
t += e.offsetTop;
l += e.offsetLeft;
}
if(arguments.length >= 2)
{
for(var i=0; i