小程式如何改變元素的樣式

1、取得元素的樣式

使用wx.createSelectorQuery()來取得元素

這裡要注意的是：取得元素樣式的函數應該放在onReady：function(){}這個裡面

let that = this
const query = wx.createSelectorQuery()
query.select('.detail-card').boundingClientRect()
query.select('.detail-header').boundingClientRect()
query.exec((res => {
    that.setData({
        cardHeight: res[0].height,
        headerHeight: res[1].height
    })
}))

2、修改元素的樣式

這裡思路是WXML中元素的樣式利用style給一個變量，透過修改topList這個數組來修改top屬性

<view 
    class="detail-card" 
    style="top:{{topList[index]+&#39;px&#39;}};z-index:{{index}}" 
    id="{{&#39;card&#39;+index}}" 
    wx:for="{{people}}" 
    wx:key="{{index}}" 
    catchtap="cardClick"
>
</view>

PHP中文網，大量免費小程式開發教程，歡迎學習！

以上是小程式如何改變元素的樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！