如何用絕對位置獲取元素的絕對座標（JavaScript，瀏覽器）

我有一些元素中心的座標也是絕對位置的其他元素的子元素的一些問題。 Here you can see a screenshot with the order of elements.如何用絕對位置獲取元素的絕對座標（JavaScript，瀏覽器）

要理解這個問題你可以更好的訪問我repository at GitHub.的index.html是在文件夾「/資源」

所以，我有一些其他的可拖動窗口和我的一些可拖動的窗口（與interact.js）想要通過lines-div來連接它們的中心（它們是用div進行繪製並進行一些轉換的）。

我使用this method來渲染線（也許這裏有一些問題）。我曾嘗試使用jsPlumb的線條畫，但我失敗了:(

有越來越點x和y。

// bottom right   
var x1 = offset1.left - margin1.left + size1.width/2 - (this.dom.getAttribute('data-x') || 0); 
var y1 = offset1.top - margin1.top + size1.height/2 - (this.dom.getAttribute('data-y') || 0); 
// top right 
var x2 = offset2.left - margin2.left + size2.width/2 - (this.dom.getAttribute('data-x') || 0); 
var y2 = offset2.top - margin2.top + size2.height/2 - (this.dom.getAttribute('data-y') || 0);

（this.dom.getAttribute（ '數據-X'）|| 0 ） - 這對Interact.js

function getMargins(elem) { 
    var top = 0, left = 0; 
    while (elem.parentNode) { 
     top = top + parseFloat(window.getComputedStyle(elem).marginTop.replace('px', '')); 
     left = left + parseFloat(window.getComputedStyle(elem).marginLeft.replace('px', '')); 
     elem = elem.parentNode; 
    } 

    return { top: Math.round(top), left: Math.round(left) } 
} 

function getOffsetRect(elem) { 
    // (1) 
    var box = elem.getBoundingClientRect() 

    // (2) 
    var body = document.body 
    var docElem = document.documentElement 

    // (3) 
    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop 
    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft 

    // (4) 
    var clientTop = docElem.clientTop || body.clientTop || 0 
    var clientLeft = docElem.clientLeft || body.clientLeft || 0 

    // (5) 
    var top = box.top + scrollTop - clientTop 
    var left = box.left + scrollLeft - clientLeft 

    return { top: Math.round(top), left: Math.round(left) } 
}

你能不能幫我獲得中心座標在此先感謝

來源

2016-06-22 Lev Balagurov

使用jQuery偏移（）函數，它給你的頂部和左側的元素。？。
返回頂部和左側是位於文檔而不是窗口內的位置。
如果你想窗口內的位置，減去窗口的scrollTop的和scrollLeft從這些值是這樣的：

var offset = $("selector").offset(); 
var posY = offset.top - $(window).scrollTop(); 
var posX = offset.left - $(window).scrollLeft();

來源

2016-06-22 18:35:52

是的，它的工作，但[不是很好..]（https://yadi.sk/i/V_6lhY7Jsijpa）它是[絕對錯誤的頂部]（https://yadi.sk/i/SgESso8A sikGm） –

@LevBalagurov，我編輯了答案，再看看。窗口可能有滾動，你得到了錯誤的頂部 –

但窗口沒有滾動。 [截圖]（https://yadi.sk/i/fjtDMhwFsj64A）我認爲帶偏移量的標準方法在這裏不起作用。也許我們應該使用樣式的參數：top，left –

試試這個。作品最好

function getPos(el) { 
    var rect=el.getBoundingClientRect(); 
    return {x:rect.left,y:rect.top}; 
}

使用方法如下：

var coords = getPos(document.querySelector("el")); 
alert(coords.x);alert(coords.y);

來源

2016-11-26 03:58:24

你救了我的命 – Seungwon

如何用絕對位置獲取元素的絕對座標（JavaScript，瀏覽器）

回答

相關問題