Question

我需要在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中使用可移植的解决方案。

修改：我注意到如果页面需要搜索，它就无效，即页面的头部被隐藏，如何进行补偿？

Answer 1

您的代码看起来很好 - PPK已发布an article on a slightly neater way of doing it，但据我所知，它在功能上完全相同。如果他的解决方案不起作用，也许你可以尝试在jsFiddle上复制你的问题？

Answer 2

即使你不能使用jQuery偏移方法或其他工具包看看它。这是jQuery计算位置的方式（我刚修改了win变量，如果元素存在则删除了测试）：

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＃test的范围）

确定用于浮动div的绝对定位的span元素的位置

2 个答案: