JavaScript动态修改页面元素的多种方式

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

JavaScript/微信小程序动态修改页面元素的几种方法：数据绑定、动态样式、条件渲染、列表渲染、DOM操作和综合示例,注意必须使用setData,避免频繁调用,单次数据限制大,且是异步的,需要的朋友可以参考下

1. 数据绑定方式（最常用）

修改文本内容

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

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

修改样式类名

<!-- WXML -->
<view class="{{isActive ? 'active' : 'inactive'}}">动态样式</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. 动态修改样式

内联样式

<!-- WXML -->
<view style="color: {{textColor}}; font-size: {{fontSize}}px">
  动态样式文本
</view>
<button bindtap="changeStyle">修改样式</button>

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

复杂样式对象

<!-- WXML -->
<view style="{{styleObject}}">复杂样式</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}}">显示的内容</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. 列表渲染

动态修改列表

<!-- 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">原始内容</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]
      // 可以基于元素信息进行动画或其他操作
      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: '初始内容',
    textClass: 'normal',
    textStyle: 'color: #333;',
    showList: false,
    items: [
      { id: 1, name: '项目1', active: false },
      { id: 2, name: '项目2', active: false }
    ]
  },
  
  handleAllChanges() {
    this.setData({
      content: '修改后的内容',
      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 }
      ]
    })
  }
})

注意事项

必须使用 setData：修改数据必须通过 this.setData()，直接修改 this.data 不会更新视图
性能优化：避免频繁调用 setData，可以合并多次修改
数据大小限制：单次 setData 的数据不能过大
异步更新：setData 是异步的，如果需要回调可以使用第二个参数

这些方法覆盖了小程序中动态修改页面元素的主要场景，你可以根据具体需求选择合适的方式。

以上就是JavaScript动态修改页面元素的多种方式的详细内容，更多关于JavaScript动态修改页面元素的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

如何用CocosCreator制作微信小游戏
这篇文章主要介绍了如何用CocosCreator制作微信小游戏，从下载工具到配置，最后连接微信小游戏预览，一步步很详细，希望读者们仔细看一下
2021-04-04
Bootstrap布局方式详解
这篇文章主要为大家详细介绍了Bootstrap布局方式，分析了Bootstrap网格系统的各种特性，感兴趣的小伙伴们可以参考一下
2016-05-05
js字符串转换为对象格式的三种方法总结
关于js里面的字符串转对象,又或者是对象转为字符串,都是平时开发应用是经常用到的知识点,下面这篇文章主要给大家介绍了关于js字符串转换为对象格式的三种方法,需要的朋友可以参考下
2022-12-12
js实现的星星评分功能函数
这篇文章主要介绍了js实现的星星评分功能函数,涉及JavaScript响应鼠标事件实现针对页面元素的遍历与样式属性的修改技巧,非常简单实用的代码,需要的朋友可以参考下
2015-12-12
简单谈谈axios中的get,post方法
下面小编就为大家带来一篇简单谈谈axios中的get,post方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
JavaScript面向对象程序设计中对象的定义和继承详解
这篇文章主要介绍了JavaScript面向对象程序设计中对象的定义和继承,结合实例形式详细分析了javascript面向对象程序设计中对象定义、继承、属性、方法、深拷贝等相关概念与操作技巧,需要的朋友可以参考下
2019-07-07
JavaScript实现组件化和模块化方法详解
这篇文章主要介绍了JavaScript实现组件化和模块化方法，模块化主要是指一个JS文件就是一个模块，向外提供特定功能的程序，组件化的中心思想其实跟模块化是大同小异的，感兴趣想要详细了解可以参考下文
2023-05-05
解决layui 三级联动下拉框更新时回显的问题
今天小编就为大家分享一篇解决layui 三级联动下拉框更新时回显的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
基于JavaScript实现跳转提示页面
这篇文章主要介绍了基于JavaScript实现跳转提示页面的相关资料,需要的朋友可以参考下
2016-09-09
JavaScript中的this陷阱的最全收集并整理(没有之一)
这篇文章主要介绍了JavaScript中的this陷阱的最全收集,需要的朋友可以参考下
2017-02-02