Comprensione dei valori di ritorno del metodo di offset

Question

Ho un elemento con id="stimulus" in un documento HTML.

Quando ho aperto questo documento in un browser e utilizzare la console del browser per indagare le proprietà di #stimulus, questo è quello che vedo:

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

Come posso interpretare questo? In che modo top è diverso da accessibile tramite il metodo css?

Answer 1

Da offset() documentation, l'offset è dalla parte superiore del documento; mentre le proprietà css superiore e sinistra sono relative al genitore. Forse si desidera guardare position() per ottenere lo scostamento relativo allo offset parent.

Answer 2

jQuery's .offset() metodo "restituisce le coordinate dell'elemento relativo al documento", mentre il metodo .css() restituisce tutti i valori applicati tramite gli stili CSS.

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

Answer 3

Offset è la posizione entro l'intera pagina

all'inizio CSS postazione di relativo elemento ad esso è più vicino antenato posizionato. Questo antenato potrebbe essere ovunque nella pagina e così offset e top non corrispondono a meno che non ci sia nessun antenato posizionato

Answer 4

Da jQuery's .offset() documentation:

Il metodo .offset() ci permette di recuperare la posizione corrente di un elemento relativo al documento. Contrastare questo con .position(), che recupera la posizione corrente relativa all'offset padre.

Il metodo .css() astrae il nativo CSSStyleDeclaration API, che restituisce la posizione relativa all'elemento genitore, ma solo se è esplicitamente specificato nel CSS. Quindi, se lo desideri, utilizza .position() anziché .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

Probabilmente ottenuto che la differenza di risultati, perché id="stimulus" veniva animato e vi inviò console.log in differenti cornici. Oppure l'elemento è in effetti "statico" e presenta alcune altre proprietà che modificano la sua posizione offset().

Come

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>