1

スパン要素に「ポップアップ」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

私は2つの方法を試しました：

最初にスパンを取得します

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

HTML要素の位置（X、Y）を取得するで提案されたアプローチを使用してどちらかを計算するよりも

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 ピクセルのテーブルの上の余白として正しくありません。

この問題を正しく解決するにはどうすればよいですか?

つまり、この要素の上に正しい位置にdivwithを配置するにはどうすればよいですか?position:ablosute

注: JQuery やその他の分厚いツールキットは使用できません。むしろ、プレーンな JavaScript で移植可能なソリューションが必要です。

編集:ページにスクロールが必要な場合、つまりページのヘッド部分が非表示になっている場合は機能しないことに注意しました。どのように補正できますか?

4

2 に答える 2

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 に答える
0

あなたのコードは問題ないように見えます — PPK はそれを行うための少しきちんとした方法に関する記事を公開しましたが、私が理解できる限り、機能的には同じです。彼の解決策がうまくいかない場合は、jsFiddle で問題を再現してみてください。

于 2013-02-12T17:39:20.273 に答える