Mi elemento tiene el siguiente estilo CSS:
#span { position: absolute; top: 100px; left: 10px; } ¿Hay alguna manera de leer el tipo de position con JavaScript? He probado estos dos enfoques:
document.getElementById("span").getBoundingClientRect() document.getElementById(id).style.position Ninguno obtiene la position . ¿Hay una mejor manera de hacerlo o una forma real de hacerlo?
Sí, puede usar Window.getComputedStyle() con una referencia a su elemento para obtener el valor de los estilos aplicados a través de CSS.
El método
Window.getComputedStyle()devuelve un objeto que contiene los valores de todas las propiedades CSS de un elemento, después de aplicar hojas de estilo activas y resolver cualquier cálculo básico que esos valores puedan contener.
La parte importante es que se tienen en cuenta todas las hojas de estilo.
const foo = document.getElementById('foo'); console.log(`foo.style.position: ${foo.style.position}`); console.log(`foo.style.top: ${foo.style.top}`); console.log(`foo.style.left: ${foo.style.left}`); console.log(`getComputedStyle(foo).position: ${getComputedStyle(foo).position}`); console.log(`getComputedStyle(foo).top: ${getComputedStyle(foo).top}`); console.log(`getComputedStyle(foo).left: ${getComputedStyle(foo).left}`); #foo { position: absolute; top: 100px; left: 10px; } <div id="foo">Hello, there!</div>Si busca la ubicación real en la página en lugar del valor de los estilos aplicados, debe consultar Recuperar la posición (X,Y) de un elemento HTML .