Die Rückgabewerte der Offset-Methode verstehen

Question

Ich habe ein Element mit id="stimulus" in einem HTML-Dokument.

Als ich dieses Dokument in einem Browser öffnen und die Browser-Konsole verwenden, um Eigenschaften von #stimulus zu untersuchen, ist es das, was ich sehe:

> $('#stimulus').offset() 
< Object {top: 0, left: 0} 
> $('#stimulus').css('top') 
< "-155.761px" 
> $('#stimulus').css('left') 
< "253.087px" 

Wie soll ich das verstehen? Wie wird innerhalb offset von mit der css Methode zugegriffen zugegriffen?

Answer 1

Von offset() documentation, Offset ist von der Spitze des Dokuments; während die oberen und linken CSS-Eigenschaften relativ zum übergeordneten Objekt sind. Vielleicht möchten Sie position( betrachten, um den Offset relativ zu offset parent zu erhalten.

Answer 2

jQuerys .offset() Methode "gibt die Koordinaten des Elements relativ zum Dokument zurück", während die Methode .css() die Werte zurückgibt, die über CSS-Stile angewendet wurden.

http://api.jquery.com/offset/

Answer 3

Offset ist die Position innerhalb der gesamten Seite

css oben wird das Element in Bezug auf es ist am nächsten positioniert Vorfahren Postion. Das Vorfahren auf der Seite sein könnte überall und so versetzt und oben passen nicht zusammen, es sei denn es keine positioniert Vorfahren

Answer 4

Von jQuery's .offset() documentation ist:

Die .offset() Methode ermöglicht es uns, die aktuelle Position eines Elements abzurufen relativ zum Dokument. Vergleichen Sie dies mit .position(), die die aktuelle Position relativ zum Offset-Eltern abruft.

Die .css() Verfahren abstrahiert die nativen CSSStyleDeclaration API, die die Position relativ zu dem Elternelement zurückgibt, aber nur, wenn es explizit in CSS angegeben ist. Wenn Sie das wollen, dann verwenden Sie .position() anstelle von .offset().

Demo

$(function() { 
 
    var child = $('.child'); 
 

 
    console.log('offset: ', child.offset()); 
 
    console.log('position: ', child.position()); 
 
    console.log('css: ', { 
 
    top: child.css('top'), 
 
    left: child.css('left') 
 
    }); 
 
});

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.parent { 
 
    position: absolute; 
 
    top: 5px; 
 
    left: 5px; 
 
} 
 
.child { 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- results pane console output; see http://meta.stackexchange.com/a/242491 --> 
 
<script src="https://gh-canon.github.io/stack-snippet-console/console.min.js"></script> 
 

 
<div class="parent"> 
 
    <div class="child">Hello World</div> 
 
</div>

Answer 5

Sie haben es wahrscheinlich, dass die Differenz der Ergebnisse, weil id="stimulus" animiert wurde und Sie sended console.log in verschiedenen Rahmen. Oder das Element ist tatsächlich "statisch" und hat einige andere Eigenschaften, die seinen offset() Standort ändern.

Wie

console.log("Offset:", $('.test').offset()); // returns {top: 0, left: 0} 
 
console.log("Top/Left:", $('.test').css('top'), $('.test').css('left')); // returns -200px, -20px

.test{ 
 
    position: absolute; 
 
    top: -200px; 
 
    left: -20px; 
 
    transform: translateY(200px) translateX(20px); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="test"></div>