JavaScript動態(tài)修改頁面元素的多種方式

更新時間：2026年01月19日 09:11:29 作者：Never_Satisfied

JavaScript/微信小程序動態(tài)修改頁面元素的幾種方法：數(shù)據(jù)綁定、動態(tài)樣式、條件渲染、列表渲染、DOM操作和綜合示例,注意必須使用setData,避免頻繁調(diào)用,單次數(shù)據(jù)限制大,且是異步的,需要的朋友可以參考下

1. 數(shù)據(jù)綁定方式（最常用）

修改文本內(nèi)容

<!-- WXML -->
<view>{{message}}</view>
<button bindtap="changeText">修改文本</button>

// JS
Page({
  data: {
    message: '初始文本'
  },
  
  changeText() {
    this.setData({
      message: '修改后的文本'
    })
  }
})

修改樣式類名

<!-- WXML -->
<view class="{{isActive ? 'active' : 'inactive'}}">動態(tài)樣式</view>
<button bindtap="toggleStyle">切換樣式</button>

/* WXSS */
.active {
  color: red;
  font-size: 20px;
}

.inactive {
  color: blue;
  font-size: 14px;
}

// JS
Page({
  data: {
    isActive: false
  },
  
  toggleStyle() {
    this.setData({
      isActive: !this.data.isActive
    })
  }
})

2. 動態(tài)修改樣式

內(nèi)聯(lián)樣式

<!-- WXML -->
<view style="color: {{textColor}}; font-size: {{fontSize}}px">
  動態(tài)樣式文本
</view>
<button bindtap="changeStyle">修改樣式</button>

// JS
Page({
  data: {
    textColor: '#000000',
    fontSize: 16
  },
  
  changeStyle() {
    this.setData({
      textColor: '#ff0000',
      fontSize: 20
    })
  }
})

復(fù)雜樣式對象

<!-- WXML -->
<view style="{{styleObject}}">復(fù)雜樣式</view>

// JS
Page({
  data: {
    styleObject: {
      color: 'blue',
      fontSize: '16px',
      backgroundColor: '#f0f0f0'
    }
  },
  
  changeComplexStyle() {
    this.setData({
      styleObject: {
        color: 'red',
        fontSize: '20px',
        backgroundColor: '#ffff00',
        padding: '10px'
      }
    })
  }
})

3. 條件渲染

wx:if 控制顯示隱藏

<!-- WXML -->
<view wx:if="{{isShow}}">顯示的內(nèi)容</view>
<button bindtap="toggleShow">切換顯示</button>

// JS
Page({
  data: {
    isShow: true
  },
  
  toggleShow() {
    this.setData({
      isShow: !this.data.isShow
    })
  }
})

多條件判斷

<!-- WXML -->
<view wx:if="{{type === 1}}">類型1</view>
<view wx:elif="{{type === 2}}">類型2</view>
<view wx:else>其他類型</view>
<button bindtap="changeType">切換類型</button>

4. 列表渲染

動態(tài)修改列表

<!-- WXML -->
<view wx:for="{{list}}" wx:key="index">
  {{index + 1}}. {{item.name}} - {{item.age}}
</view>
<button bindtap="addItem">添加項目</button>
<button bindtap="removeItem">刪除項目</button>

// JS
Page({
  data: {
    list: [
      { name: '張三', age: 20 },
      { name: '李四', age: 22 }
    ]
  },
  
  addItem() {
    const newList = this.data.list.concat([
      { name: '新用戶', age: Math.floor(Math.random() * 30) + 18 }
    ])
    this.setData({
      list: newList
    })
  },
  
  removeItem() {
    if (this.data.list.length > 0) {
      const newList = this.data.list.slice(0, -1)
      this.setData({
        list: newList
      })
    }
  }
})

5. 獲取和操作DOM元素

使用 SelectorQuery

<!-- WXML -->
<view id="myElement">原始內(nèi)容</view>
<button bindtap="getElementInfo">獲取元素信息</button>
<button bindtap="animateElement">動畫效果</button>

// JS
Page({
  getElementInfo() {
    const query = wx.createSelectorQuery()
    query.select('#myElement').boundingClientRect()
    query.exec((res) => {
      console.log('元素信息:', res[0])
    })
  },
  
  animateElement() {
    const query = wx.createSelectorQuery()
    query.select('#myElement').boundingClientRect()
    query.exec((res) => {
      const element = res[0]
      // 可以基于元素信息進(jìn)行動畫或其他操作
      this.animate('#myElement', [
        { opacity: 1.0, rotate: 0 },
        { opacity: 0.5, rotate: 45 },
        { opacity: 1.0, rotate: 0 }
      ], 1000)
    })
  }
})

6. 綜合示例

<!-- WXML -->
<view class="container">
  <text class="{{textClass}}" style="{{textStyle}}">{{content}}</text>
  
  <view wx:if="{{showList}}">
    <view wx:for="{{items}}" wx:key="id" class="item {{item.active ? 'active' : ''}}">
      {{item.name}}
    </view>
  </view>
  
  <button bindtap="handleAllChanges">一鍵修改所有</button>
</view>

// JS
Page({
  data: {
    content: '初始內(nèi)容',
    textClass: 'normal',
    textStyle: 'color: #333;',
    showList: false,
    items: [
      { id: 1, name: '項目1', active: false },
      { id: 2, name: '項目2', active: false }
    ]
  },
  
  handleAllChanges() {
    this.setData({
      content: '修改后的內(nèi)容',
      textClass: 'highlight',
      textStyle: 'color: red; font-size: 20px;',
      showList: true,
      items: [
        { id: 1, name: '激活項目1', active: true },
        { id: 2, name: '激活項目2', active: true },
        { id: 3, name: '新項目3', active: false }
      ]
    })
  }
})