我需要在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像素表的邊界。
我該如何正確解決這個問題?
即我怎樣才能把div
與position:ablosute
在這個元素上 正確的位置?
注意:我不能使用JQuery或其他胖工具箱,我寧願在平面JavaScript中使用便攜式解決方案。
編輯:我注意到,如果頁面需要滾動,它不起作用,即頁面的頭部被隱藏,它如何被補償?
你可能想提一下你測試過的瀏覽器。我把你的代碼保存下來,然後在Firefox 18,Chrome 24甚至IE10上運行它,並得到了預期的結果:[237,269,548,567]。除了Chrome之外,第二種方法返回的是浮點座標而不是整數,但是它們相差半個像素。 其實,我剛剛意識到,您使用的方法不包括滾動位置,所以請嘗試添加。 – 2013-02-12 17:27:25