JS内のオブジェクトの座標の取得

Question

this questionに基づいて、クロスブラウザーのオブジェクトの位置を取得する最も信頼できる方法は何ですか？ Thx

Answer 1

、あなたがelemという名前の要素を持っていると仮定すると、それは要素の左上隅のXとY座標を取得するために、実際には非常に簡単です、あなたは文書にこれらをしたいと仮定しを調整します。すべてのブラウザで、これはelem.offsetLeftとelem.offsetTopプロパティによって返されます。

elemが別の要素に絶対配置されている場合、たとえば、の左/上端が20pxの場合、これらのプロパティは現在の値のみを考慮に入れて0を返します要素のチェーン全体ではありません。幸いなことに、特定の要素に関連付けられた要素のマージンをすべて捕捉し、正しい文書座標を取得するためにそれらを集計するために、「チェーントラバーサル」関数を使用することができます。

Sime Vidasが述べたように、JQueryのposition()とoffset()プロパティもあります。この場合、offset()プロパティが必要です。

getBoundingClientRect()メソッドを使用することもできますが、これは要素の座標をoffsetParentに対して返します。したがって、完全に信頼できるものではありません。次の例をご覧ください。

// getPosition function 
function getPosition(elem){ 

    var dims = {offsetLeft:0, offsetTop:0}; 

    do { 
     dims.offsetLeft += elem.offsetLeft; 
     dims.offsetTop += elem.offsetTop; 
    } 

    while (elem = elem.offsetParent); 

    return dims; 
} 

cont1.style.position = "absolute"; 
cont1.style.marginLeft = "10px"; 

cont2.style.position = "absolute"; 
cont2.style.marginLeft = "10px"; 

box.style.position = "absolute"; 
box.style.marginLeft = "10px"; 


console.log(getPosition(box).offsetLeft); // returns "30" 
console.log(getPosition(box).offsetTop); // returns "0" 

// or in JQuery 
console.log($(box).offset().left) // also returns "30" 
console.log($(box).offset().top) // also returns "0" 

また、thisとお読みください。

Answer 2

jQuery offset()メソッドを使用して、ドキュメントに対する要素の位置を検索したい場合。

var p = $("p:last"); 
var offset = p.offset(); 
p.html("left: " + offset.left + ", top: " + offset.top); 

.offset()参照：あなたがその親に要素の相対的なpoistionを検索したい場合はhttp://api.jquery.com/offset/

その後、jQueryのposition()メソッドを使用します。

var p = $("p:first"); 
var position = p.position(); 
$("p:last").text("left: " + position.left + ", top: " + position.top); 

.position()参照：http://api.jquery.com/position/

そして、これらの方法では、ほとんどのブラウザのほとんどで完璧な結果を与えます。一般的に

Answer 3

element.getBoundingClientRect()が好きです。それはhas good cross-browser supportです。

var coords = element.getBoundingClientRect(); 

これは、ビューポートに相対的な座標を示します。文書との相対座標を取得するには、topとdocument.documentElement.scrollLeftをleftに追加します。

coords.top += document.documentElement.scrollTop; 
coords.left += document.documentElement.scrollLeft; 

しかし、あなたはすでにjQueryのを使用しているので、あなたにもちょうど.offset()を使用することができます。