替代尋找<img> x和y原點

我有以下js基本上可以找到標籤左上角的x和y原點。然而，這並不總是工作，出於某種原因，有時它工作。不知道爲什麼，但一些offsetLeft和offsetTop是0.你有其他的選擇嗎？替代尋找<img> x和y原點

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.clientHeight以獲取圖像的寬度和高度。爲什麼這也給我0？

來源

2012-01-31 xonegirlz

你可以粘貼一個顯示它不工作的jsfiddle嗎？ – 2012-01-31 22:58:49

第一個問題，我想你錯過了節點本身的偏移。

我寫的這個函數經常用到。試試吧，告訴我它不工作的場景...

/** 
    * 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); 
     } 
    }

來源

2012-01-31 22:43:27 Nabor

我添加了一些意見，clientWidth和clientHeight也是這個img，爲什麼？ – xonegirlz 2012-01-31 22:52:21

@xonegirlz它可能是0時，圖像未加載。 – Cheery 2012-01-31 22:53:37

你什麼時候調用函數？在哪個事件？ – Nabor 2012-02-01 07:55:17

我不完全知道你正在嘗試做的，但我想你可能想看看getBoundingClientRect()

編輯你需要控制滾動此獲得相對於視位置。 EG：

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

來源

2012-01-31 22:37:39 Matthew

替代尋找<img> x和y原點

回答

相關問題