position - 親コンテナに対する要素の位置/オフセットを取得しますか?

Question

私はjQueryでの作業に慣れています。ただし、現在のプロジェクトでは zepto.js を使用しています。Zepto はposition()jQuery のようなメソッドを提供しません。ゼプトのみ付属offset()。

純粋なjsまたはZeptoを使用して、親に対するコンテナのオフセットを取得する方法はありますか?

Answer 1

警告：jQuery、標準のJavaScriptではありません

element.offsetLeftおよびは、 ;element.offsetTopに対する要素の位置を見つけるための純粋なjavascriptプロパティです。またはoffsetParentの位置を持つ最も近い親要素であるrelativeabsolute

または、いつでもZeptoを使用して、要素とその親の位置を取得し、2つを引くだけで済みます。

var childPos = obj.offset();
var parentPos = obj.parent().offset();
var childOffset = {
    top: childPos.top - parentPos.top,
    left: childPos.left - parentPos.left
}

これには、親が配置されていない場合でも、親に対する子のオフセットを与えるという利点があります。

Answer 2

純粋な js ではoffsetLeft、 andoffsetTopプロパティを使用するだけです。
フィドルの例: http://jsfiddle.net/WKZ8P/

var elm = document.querySelector('span');
console.log(elm.offsetLeft, elm.offsetTop);

p   { position:relative; left:10px; top:85px; border:1px solid blue; }
span{ position:relative; left:30px; top:35px; border:1px solid red; }

<p>
    <span>paragraph</span>
</p>

Answer 3

私は Internet Explorer でこのようにしました。

function getWindowRelativeOffset(parentWindow, elem) {
    var offset = {
        left : 0,
        top : 0
    };

    // relative to the target field's document
    offset.left = elem.getBoundingClientRect().left;
    offset.top = elem.getBoundingClientRect().top;

    // now we will calculate according to the current document, this current
    // document might be same as the document of target field or it may be
    // parent of the document of the target field
    var childWindow = elem.document.frames.window;
    while (childWindow != parentWindow) {
        offset.left = offset.left + childWindow.frameElement.getBoundingClientRect().left;
        offset.top = offset.top + childWindow.frameElement.getBoundingClientRect().top;
        childWindow = childWindow.parent;
    }

    return offset;
};

=================== このように呼び出すことができます

getWindowRelativeOffset(top, inputElement);

私は IE のみに焦点を当てていますが、他のブラウザーでも同様のことができます。