是否可以通過$refs魔術變數訪問 HTML 物件的樣式屬性？
好像可以訪問元素的屬性，但是不能更新！？！？按下 后button，沒有任何反應（從用戶的角度來看）。影子只是停留在同一個地方。
我可以從控制臺日志中看到該函式確實按預期運行，但正如日志所示，該offsetLeft屬性沒有改變。
<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>
如果$refs解決這個問題的方法是錯誤的，那么我如何使用 AlpineJS 操作 DOM？
uj5u.com熱心網友回復：
這不是 alpinejs 的問題。您不能更改 offsetLeft 的原因是因為這是一個只讀欄位。
為了在 alpinejs 中操作 DOM 元素，我建議你使用style或class系結，你可以通過你的data值的狀態來操作類字串的值。
<div x-data="{ open: false }">
<button x-on:click="open = ! open">Toggle Dropdown</button>
<div :class="open ? '' : 'hidden'">
Dropdown Contents...
</div>
</div>
同樣的事情可以用樣式物件來完成。因此，ref 魔法僅用于在 alpinejs 中查詢 DOM 元素。
uj5u.com熱心網友回復：
正如@LazarNikolic 所指出的，我的問題與 Alpine 無關。該$refs.shadow物件是一個 JavaScript 物件，并且offsetLeft是一個只讀屬性 >> https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft
x-data屬性內的 JavaScript應如下所示：
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'
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/383937.html
標籤：javascript dom 高山.js