tutoriais mais recente desenvolvimento web
 

Element offsetTop Property

<Elemento de objeto

Exemplo

Obter a posição offsetTop de um <div> elemento:

<div id="test">
<p>Click the button to get offsetTop for the test div.</p>
<p><button onclick="myFunction()">Try it</button></p>
<p>offsetTop is: <span id="demo"></span></p>
</div>

<script>
function myFunction() {
    var testDiv = document.getElementById("test");
    document.getElementById("demo").innerHTML = testDiv.offsetTop;
}
</script>
Tente você mesmo "

Definição e Uso

A propriedade offsetTop retorna a posição de topo (in pixels) em relação ao topo do elemento de offsetParent.

O valor retornado inclui:

  • a primeira posição, e a margem do elemento
  • topo estofamento, barra de rolagem e borda do elemento offsetParent

Nota: O offsetParent elemento é o ancestral mais próximo que tem uma posição diferente de estática.

Dica: Para retornar a posição esquerda de um elemento, use o offsetLeft propriedade.


Suporte navegador

Propriedade
offsetTop sim 8 sim sim sim

Sintaxe

Retornar a posição compensada top:

object .offsetTop

Detalhes técnicos

Valor padrão: nenhum valor padrão
Valor de retorno: Um número, representando a posição de topo do elemento, em pixels
DOM Versão: CSSOM

mais Exemplos

Exemplo

Obter a posição do aa <div> elemento:

<div id="test">
<p>Click the button to get the left and top offsets for the test div.</p>
<p><button onclick="myFunction()">Try it</button></p>
<p id="demo">offsetLeft: <br>offsetTop: </p>
</div>
<script>
function myFunction() {
    var testDiv = document.getElementById("test");
    var demoDiv = document.getElementById("demo");
    demoDiv.innerHTML = "offsetLeft: " + testDiv.offsetLeft + "<br>offsetTop: " + testDiv.offsetTop;
}
</script>
Tente você mesmo "


<Elemento de objeto