Estoy tratando de obtener el valor offsetLeft de varios elementos. Obtengo el valor esperado para cada elemento excepto para el elemento del cuerpo.
El valor de offsetLeft para cada elemento secundario incluye su propio valor de margen izquierdo más el valor de margen izquierdo para cada elemento antecesor, incluido el cuerpo, como se esperaba. Sin embargo, offsetLeft para el elemento del cuerpo no incluye su propio valor de margen izquierdo de 2px y devuelve 0.
¿Por qué offsetLeft del cuerpo no incluye el margen?
Las herramientas de desarrollo muestran que el elemento del cuerpo tiene un margen de 2px para los 4 lados.
Tenga en cuenta que veo un problema diferente para el margen superior, pero supongo que se debe al colapso del margen.
Obtengo los mismos resultados tanto en Chrome como en Firefox.
Aquí están los resultados del código.
desplazamiento del cuerpo a la izquierda: 0 arriba: 0 ancho: 400 alto: 400 margen izquierdo: 2px
div1 desplazamiento a la izquierda: 7 arriba: 5 ancho: 390 alto: 18 margen izquierdo: 5px
div2 desplazamiento izquierdo: 12 superior: 5 ancho: 380 alto: 18 margen izquierdo: 5px
A continuación se muestra el ejemplo de código completo.
<!DOCTYPE html> <head> <style> * { box-sizing: border-box; } body { margin: 2px; width: 400px; height: 400px; } #div1 { margin: 5px; } #div2 { margin: 5px; } </style> </head> <body id="body" > <div id="div1"> <div id="div2">Div 2</div> </div> </body> <script> let body = document.getElementById('body'); let div1 = document.getElementById('div1'); let div2 = document.getElementById('div2'); let marginLeftBody = window.getComputedStyle(body).getPropertyValue('margin-left'); let marginLeftDiv1 = window.getComputedStyle(div1).getPropertyValue('margin-left'); let marginLeftDiv2 = window.getComputedStyle(div2).getPropertyValue('margin-left'); console.log(`body offset left: ${body.offsetLeft} top: ${body.offsetTop} width: ${body.offsetWidth} height: ${body.offsetHeight} margin-left: ${marginLeftBody}`); console.log(`div1 offset left: ${div1.offsetLeft} top: ${div1.offsetTop} width: ${div1.offsetWidth} height: ${div1.offsetHeight} margin-left: ${marginLeftDiv1}`); console.log(`div2 offset left: ${div2.offsetLeft} top: ${div2.offsetTop} width: ${div2.offsetWidth} height: ${div2.offsetHeight} margin-left: ${marginLeftDiv2}`); </script> </html>