Al usar JavaScript, necesito encontrar un elemento que tenga una posición fija y establecer su atributo superior en 60px.
const myDiv = document.querySelector('.my-div') if(myDiv && myDiv.style.position == 'fixed') { myDiv.style.top = '60px'; }Pero no funciona. ¿Qué esta mal en mi codigo?
El element.style.prop se ocupa únicamente de los estilos inline de un elemento. No se ve afectado por el cambio de estilos embedded o external (más información aquí ). Por lo tanto, no puede usarlo para obtener el valor de una propiedad non-inline .
Por lo tanto, necesita usar esto: -
const myDiv = document.querySelector('.my-div'); if (myDiv && window.getComputedStyle(myDiv).getPropertyValue('position') == 'fixed') { myDiv.style.top = '60px'; } Remítalos desde aquí: getComputedStyle y getPropertyValue .
O incluso más simple, simplemente podría usar el archivo . o la notación [] para obtener los valores. Puedes ver las diferencias aquí .
const myDiv = document.querySelector('.my-div'); if (myDiv && window.getComputedStyle(myDiv).position == 'fixed') { myDiv.style.top = '60px'; }Puede usar window.getComputedStyle() .
Devolverá un objeto con todos los estilos, incluso si no lo define explícitamente, a diferencia de la propiedad de style que solo contiene los valores de estilo que establece explícitamente.
Para su código, se vería así:
const myDiv = document.querySelector('.my-div') if (!myDiv) return; // Early return guard to avoid calling getComputedStyle with null const style = window.getComputedStyle(myDiv) if (style.position === 'fixed') { myDiv.style.top = '60px'; }