1. ホーム
  2. javascript

[解決済み] div/spanタグの位置を取得する

2022-09-27 13:07:21

質問

誰か top &です。 left の位置は div または span 要素が指定されていない場合は?

ie:

<span id='11a' style='top:55px;' onmouseover="GetPos(this);">stuff</span>
<span id='12a' onmouseover="GetPos(this);">stuff</span>

上記の中で、もし私が

document.getElementById('11a').style.top

の値は 55px が返されます。しかし、もし私がそれを span '12a'に対してそれを試すと、何も返されません。

私はたくさんの div / span を指定できないページで top / left のプロパティを表示させたいのですが、そのためには div をその要素の直下に表示する必要があります。

どのように解決するのですか?

この関数は、ページに対する要素の x,y 位置を表示します。基本的には、すべての要素の親をループアップし、それらのオフセットを一緒に追加する必要があります。

function getPos(el) {
    // yay readability
    for (var lx=0, ly=0;
         el != null;
         lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
    return {x: lx,y: ly};
}

しかし、コンテナに対する要素のx,yの相対位置が欲しいだけであれば、必要なのは

var x = el.offsetLeft, y = el.offsetTop;

この要素の直下に要素を置くには、その高さも知っておく必要があります。これはoffsetHeight/offsetWidthプロパティに格納されています。

var yPositionOfNewElement = el.offsetTop + el.offsetHeight + someMargin;