從外部DIv獲取元素位置

是否可以從外部div獲取放置在內部div中的元素？爲了澄清模糊的問題，圖象的下方設置從外部DIv獲取元素位置

div http://img600.imageshack.us/img600/8200/45tn.png

在該圖片。

大黑矩形=外DIV，ID = 「外格」

紅色矩形=第一內DIV，ID = 「紅內格」

藍矩形=第二內DIV，ID =「blue-inner-div」

有一個textarea放置在紅色和藍色div。

假設Red Div中的textarea的ID被稱爲「TA1」，藍色的被稱爲「TA2」。

是否有可能從外格獲得「TA1」或「TA2」的位置？例如，TA2的頂部和左邊的藍色內部分區內的150，但我想知道什麼TA2的頂部和左側是從外部視圖，這絕對不是150.

來源

2013-10-11 Junior Programmer

我不確定，但你可能會得到你的textarea的頁面偏移量，並扣除父元素的頁面偏移量。 – isherwood

http://api.jquery.com/position/或http://api.jquery.com/offset/ – andleer

@andleer OP從未在此提及過「jquery」... – gustavohenke

也許.. 。

var offset = { top: 0, left: 0 }; 
do { 
    offset.top += elem.offsetTop; 
    offset.left += elem.offsetLeft; 

    elem = elem.parentNode; 
} while (elem != null && elem.id !== "outer-div");

您考慮，如果elem不被outer-div遏制，這將在文檔中返回它的位置。

另一種形式給出，重一點，但它是非常接近的jQuery的解決方案：

function getOffset(elem) { 
    var offset = elem.getBoundingClientRect(); 
    var docElem = document.documentElement; 

    return { 
    top: offset.top + window.pageYOffset - docElem.clientTop, 
    left: offset.left + window.pageXOffset - docElem.clientLeft 
    }; 
} 

var offsetOuter = getOffset(document.getElementById("outer-div")); 
var offsetTextarea = getOffset(document.getElementById("TA1")); 

console.log(offsetOuter.left - offsetTextarea.left); // ta-da

我認爲，您只使用香草JS，無庫（jQuery的或其他）。

來源

2013-10-11 17:52:04 gustavohenke

是的，我使用的是vanilla JS，你的解決方案工作得很好，謝謝你的回答。 –

希望這會有所幫助。從外層div

位置...

$(function(){ 
    alert($("#TA1").offset().left-$("#outer-div").offset().left); 
    alert($("#TA2").offset().left-$("#outer-div").offset().left); 
});

供參考：http://jsfiddle.net/GF9VM/

P.S.同樣的方式你可以獲得最高分。

來源

2013-10-11 18:15:46 PSK

我不得不評論我在問題文章中評論過的同一個東西：他從來沒有提到他在使用jQuery。 – gustavohenke

好的，那麼你很好 – PSK

從外部DIv獲取元素位置

回答

相關問題