如何不使用JQuery來獲得標簽的左上角？

Question

如何不使用JQuery來獲得標簽的左上角？

Answer 1

element.offsetLeft和element.offsetTop將為您提供與其父級相關的頂部拐角

function top(el) {
    var topVal = el.offsetTop;
    if (el.parentNode) topVal+= top(el.parentNode);
    return topVal;
}

function left(el) {
    var leftVal = el.offsetLeft;
    if (el.parentNode) leftVal+= left(el.parentNode);
    return leftVal;
}

遞歸調用它直到您遇到文檔（document.parentNode為null並結束遞歸）將使您相對於整個文檔。 請注意，這與iframe或其他具有自己文檔的文件不兼容。

[編輯]

上面的遞歸函數過於幼稚，僅適用於非常簡單的頁面。 您可以改為遍歷offsetParent，但這也會引起一些問題。

這個解決方案似乎工作合理，但我自己已經對其進行了全面測試

檢索HTML元素的位置（X，Y）

Answer 2

要獲得相對於其父代的頭寸，請使用以下命令：

function getRelativePos(el) {
  var left=el.offsetX;
  var top=el.offsetY;
  return {top:top,left:left};
}

現在您可以像這樣使用它，向左pos發出警報：

var myElement=document.getElementById('myel');
alert( getRelativePos(myElement).left );

如果需要絕對位置，請使用以下命令：

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

您可以像使用getRelativePos函數一樣使用它。