如何不使用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};
}

现在您可以像这样使用它，提醒左侧位置：

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

如果您想要绝对位置，请使用：

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

您可以像 getRelativePos 功能。