1

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

编辑：我注意到如果页面需要scolling它不起作用，即页面的头部被隐藏，如何补偿？

4

2 回答 2

0

你的代码看起来不错——PPK 发表了一篇文章，介绍了一种稍微简洁的方法，但据我所知，它在功能上是相同的。如果他的解决方案不起作用，也许您可​​以尝试在 jsFiddle 上复制您的问题？

于 2013-02-12T17:39:20.273 回答
0

即使你不能使用 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 )
    };
}

这是一个要测试的小提琴（单击带有 ID#test 的跨度）

于 2013-02-12T17:56:28.177 回答