Pra que que serve esse tela.offsetLeft e o tela.offsetTop e qual a diferença entre os dois ?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Pra que que serve esse tela.offsetLeft e o tela.offsetTop e qual a diferença entre os dois ?
A função .offsetLeft retorna em pixels a distância do elemento em questão em relação ao elemento pai, levando em consideração a distância à esquerda. Por exemplo, se temos apenas uma div dentro do body de um html e essa div possuí um margin-left de 10px a função irá retornar 10.
Caso essa div esteja dentro de outra div, o que seja levado em consideração será a distância dessa div em relação a div pai.
O mesmo se aplica para função .offsetTop, porém a referência de distância é o topo.
Veja esse exemplo: Basta salvar o código como arquivo HTML e abrir no navegador
<html>
<head>
<style>
#teste {
left: 10px;
margin: 0;
padding: 10px;
width: 300px;
position: absolute;
border: 1px solid black
}
#divInsideDiv_Child {
top: 0;
left: 8px;
margin: 0;
padding: 10px;
width: 300px;
position: relative;
border: 1px solid black
}
#divInsideDiv_Parent {
top: 200;
left: 30px;
margin: 0;
padding: 0px;
width: 400px;
position: absolute;
border: 1px solid red
}
</style>
</head>
<body>
<div id="teste">
<p>Clique no botão para verificar o offsetLeft da div de id teste.</p>
<p><button onclick="myFunction('teste', 'span')">Verificar</button></p>
<p>offsetLeft é: <span id="span"></span></p>
</div>
<div id="divInsideDiv_Parent">
<div id="divInsideDiv_Child">
<p>Clique no botão para verificar o offsetLeft da div filha.</p>
<p><button onclick="myFunction('divInsideDiv_Child', 'span2')">Verificar</button></p>
<p>offsetLeft é: <span id="span2"></span></p>
</div>
</div>
<script>
function myFunction(divId, spanId) {
var testDiv = document.getElementById(divId);
document.getElementById(spanId).innerHTML = testDiv.offsetLeft;
}
</script>
</body>
</html>Shooow, Marcos Pacheco. Entendi agora. Muito obrigado. Bons estudos!