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を徐々に蓄積するだけで、この要素の絶対座標が得られます.
三、コード
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