2013-02-12 196 views
1

我需要在span元素上創建一個「彈出」div。確定span元素的絕對定位浮動div的位置

我嘗試確定其位置和大小以給出正確的邊界以放置浮動div。

<html> 
    <body> 
    <p>text a</p> 
      <div style="padding-left:200px;padding-top:500px"> 
        <table class="message"> 
          <tr><td>test <span id="test">hello</span> world</td></tr> 
        </table> 
      </div> 
    </body> 
    </html> 

我試圖獲得這些信息元素id=test

我嘗試了兩種方法:

首先,我得到跨度

var span = document.getElementById('test'); 

比我計算或者使用建議在Retrieve the position (X,Y) of an HTML element方法

var x0 = 0; 
var y0 = 0; 
var el = span; 
while(el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) { 
    x0 += el.offsetLeft - el.scrollLeft; 
    y0 += el.offsetTop - el.scrollTop; 
    el = el.offsetParent; 
} 
var x1 = x0 + span.offsetWidth; 
var y1 = y0 + span.offsetHeight; 

而且我還通過嘗試:

var rect = span.getBoundingClientRect(); 
x0 = rect.left; 
x1 = rect.right; 
y0 = rect.top; 
y1 = rect.bottom; 

比我登錄:

console.log(JSON.stringify([x0,x1,y0,y1])); 

在這兩種情況下,我得到:

[236,264,381,401] 

不能像正確的高於500像素表的邊界。

我該如何正確解決這個問題?

即我怎樣才能把divposition:ablosute在這個元素上 正確的位置?

注意:我不能使用JQuery或其他胖工具箱,我寧願在平面JavaScript中使用便攜式解決方案。

編輯:我注意到,如果頁面需要滾動,它不起作用,即頁面的頭部被隱藏,它如何被補償?

+0

你可能想提一下你測試過的瀏覽器。我把你的代碼保存下來,然後在Firefox 18,Chrome 24甚至IE10上運行它,並得到了預期的結果:[237,269,548,567]。除了Chrome之外,第二種方法返回的是浮點座標而不是整數,但是它們相差半個像素。 其實,我剛剛意識到,您使用的方法不包括滾動位置,所以請嘗試添加。 – 2013-02-12 17:27:25

回答

0

你的代碼看起來不錯 - PPK發佈了an article on a slightly neater way of doing it,但據我所知,它的功能完全相同。如果他的解決方案不起作用,也許你可以嘗試在jsFiddle上覆制你的問題?

+0

不,如果頁面滾動,它不會產生錯誤的位置。 – Artyom 2013-02-12 17:49:27

0

即使你不能使用jQuery的偏移方法或其他工具包看看它。這是jQuery的計算位置的方式(我只是修改了勝利變量,如果除去該元素存在於測試):

function getPos(elem) { 
    var docElem, win, 
     box = { top: 0, left: 0 }, 
     doc = elem && elem.ownerDocument; 
    if (!doc) { return; } 
    docElem = doc.documentElement; 
    if (typeof elem.getBoundingClientRect !== typeof undefined) { 
     box = elem.getBoundingClientRect(); 
    } 
    win = self; 
    return { 
     top: box.top + (win.pageYOffset || docElem.scrollTop) - (docElem.clientTop || 0), 
     left: box.left + (win.pageXOffset || docElem.scrollLeft) - (docElem.clientLeft || 0) 
    }; 
} 

這裏是一個fiddle,測試(點擊ID爲#測試量程)