¿Es posible manipular las propiedades de estilo de un objeto HTML con AlpineJS accediendo a él a través de la variable mágica $refs refs?
Parece que puedo acceder a las propiedades del elemento, pero no puedo actualizarlas!?!? Después de presionar el button , no sucede nada (desde el punto de vista del usuario). La sombra se queda en el mismo lugar.
Puedo ver en el registro de la consola que la función se ejecuta como se esperaba, pero como muestra el registro, la propiedad offsetLeft no cambia.
<style> .shadow { color: rgba(256, 256, 256, 0.1); left: 500px; } </style> <div x-data="{ changeElement() { console.log ('shadow at', $refs.shadow.offsetLeft); // prints '500' $refs.shadow.offsetLeft = 20; console.log ('shadow at', $refs.shadow.offsetLeft); // still prints '500'!?!?! } }"> <button @click="changeElement()">Change Element</button> <div class="shadow" x-ref="shadow"></div> </div> Si $refs es la forma incorrecta de abordar esto, ¿cómo manipulo el DOM usando AlpineJS?
Este no es el problema con alpinejs. La razón por la que no puede cambiar offsetLeft es porque este es un campo de solo lectura .
Para manipular los elementos DOM en alpinejs, le sugiero que use el enlace de estilo o clase y puede manipular el valor de la cadena de clase por el estado de su valor de data .
<div x-data="{ open: false }"> <button x-on:click="open = ! open">Toggle Dropdown</button> <div :class="open ? '' : 'hidden'"> Dropdown Contents... </div> </div>Lo mismo se puede hacer con el objeto de estilo. Por lo tanto, ref magic se usa solo para consultar elementos DOM en alpinejs.
Como señaló @LazarNikolic, mi problema no está relacionado con Alpine. El objeto $refs.shadow es un objeto JavaScript y offsetLeft es una propiedad de solo lectura >> https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft
El código JavaScript dentro del atributo x-data debe decir lo siguiente:
changeElement() { console.log ('shadow at', $refs.shadow.offsetLeft); // prints '500' $refs.shadow.style.left = 20 + 'px'; // because in the real-world, 20 is a dynamic element console.log ('shadow at', $refs.shadow.offsetLeft); // prints '20' }