我需要在span元素上创建一个“弹出”div。确定span元素的绝对定位浮动div的位置
我尝试确定其位置和大小以给出正确的边界以放置浮动div。
text a
我试图获得这些信息元素id=test
我尝试了两种方法:
首先,我得到跨度
var span = document.getElementById('test');
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中使用便携式解决方案。
编辑:我注意到,如果页面需要滚动,它不起作用,即页面的头部被隐藏,它如何被补偿?
2013-02-12
Artyom
+0
你可能想提一下你测试过的浏览器。我把你的代码保存下来,然后在Firefox 18,Chrome 24甚至IE10上运行它,并得到了预期的结果:[237,269,548,567]。除了Chrome之外,第二种方法返回的是浮点坐标而不是整数,但是它们相差半个像素。 其实,我刚刚意识到,您使用的方法不包括滚动位置,所以请尝试添加。 –
2013-02-12 17:27:25