Exemplo
Obter a posição offsetLeft de um <div> elemento:
<div id="test">
<p>Click the button to get offsetLeft for the test
div.</p>
<p><button onclick="myFunction()">Try it</button></p>
<p>offsetLeft
is: <span id="demo"></span></p>
</div>
<script>
function
myFunction() {
var testDiv = document.getElementById("test");
document.getElementById("demo").innerHTML = testDiv.offsetLeft;
}
</script> Tente você mesmo " Definição e Uso
A propriedade offsetLeft retorna a posição à esquerda (in pixels) em relao ao lado esquerdo do elemento offsetParent.
O valor retornado inclui:
- a posição à esquerda, e a margem do elemento
- o preenchimento esquerda, 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 de topo de um elemento, use o offsetTop propriedade.
Suporte navegador
| Propriedade | |||||
|---|---|---|---|---|---|
| offsetLeft | sim | 8 | sim | sim | sim |
Sintaxe
Retornar a posição compensada esquerda:
object .offsetLeft
Detalhes técnicos
| Valor padrão: | nenhum valor padrão |
|---|---|
| Valor de retorno: | Um número, que representa a posição esquerda 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 "