查找 <img> X 和 Y 原点的替代方法

Question

我有下面的js，它基本上是为了找到标签左上角的x和y原点。然而，由于某种原因，这并不总是有效的，有时它也有效。不知道为什么，但有些offsetLeft和offsetTop是0。你还有别的选择吗？

function f() {
  var el = document.elementFromPoint(%f, %f);
  var pos = [el.offsetLeft, el.offsetTop];
  var parent = el.offsetParent;
  if (parent != el) {
    while (parent) {
      pos[0] += parent.offsetLeft;
      pos[1] += parent.offsetTop;
      parent = parent.offsetParent;
    }
  }
  return pos.toString();
} f();

我还试图通过element.clientWidth和element.cientHeight来获得图像的宽度和高度。为什么这也会给我0？

Answer 1

第一个问题，我认为您错过了节点本身的偏移量。

我写的这个函数我经常使用。试试看，告诉我它不起作用的场景。。。

    /**
     * Returns an Object with an x and an y value giving the current top and
     * left of the DOM element.
     * 
     * @param {HTMLElement}
     *          element
     * @return
     * @type Object
     */
    function getElementPosition(node) {
        try {
            var xy = {
                x : 0,
                y : 0
            };
            var parent = node.offsetParent;
            while (parent) {
                xy.x += parent.offsetLeft;
                xy.y += parent.offsetTop;
                parent = parent.offsetParent;
            }
            xy.x += node.offsetLeft;
            xy.y += node.offsetTop;
            return xy;
        } catch (e) {
            console.error("getElementPosition(", arguments, ") >", e);
        }
    }

Answer 2

我不确定你想做什么，但我认为你可能想研究getBoundingClientRect()

EDIT这将获取滚动所需控制的相对于视口的位置。例如：

myDiv.getBoundingClientRect().top + window.scrollY
myDiv.getBoundingClientRect().left + window.scrollX

点击此处了解更多信息：https://developer.mozilla.org/en/DOM/element.getBoundingClientRect