微信小程序 JS 动态修改样式的实现方法

作者：清欢时间：2026-10-22 19:42:30浏览：141

本文介绍在微信小程序中如何通过 JavaScript 动态修改视图样式。主要讲解利用 setData 更新数据，并结合 WXML 中的内联 style 属性实现背景色、字体颜色及高度等样式的实时变更。通过具体代码示例演示单属性与多属性同时修改的方法，帮助开发者掌握动态样式控制技巧。

前言

本文主要介绍在微信小程序开发中，如何使用 JavaScript 动态修改页面样式的具体方法，供读者参考学习。

首先构建一个基础示例，通过绑定点击事件来改变 view 元素的属性，例如将背景色修改为蓝色。

最终呈现的效果如下所示：

动态修改单个样式属性

具体实现代码如下：

以下是基础示例代码。

index.wxml 文件内容如下：


<view >
 <view class="cont" style="background:{{background}};">属性改变</view>
 <button bindtap="tryDriver">测试</button>
</view>

对应的样式文件 index.wxss 代码如下：


.cont{
 height: 150rpx;
 line-height: 150rpx;
 text-align: center;
 border: 1px solid #89dcf8;
 margin-bottom:112rpx;
 margin:13rpx;
}

逻辑处理文件 index.js 代码如下：


Page({
 data: {},
 tryDriver: function() {
 this.setData({
  background: "#89dcf8"
 })
 }
})

动态修改多个样式属性

若需一次性修改多个样式属性，例如同时调整背景颜色、字体颜色以及字体大小，可参考以下实现方式。

WXML 结构如下：


<view >
 <view class="cont" style="background:{{background}};color:{{color}};height:{{height}}">属性改变</view>
 <button bindtap="tryDriver">测试</button>
</view>

对应的 JS 逻辑代码如下：


Page({
 data: {},
 tryDriver: function() {
 this.setData({
  background: "#89dcf8",
  color:'#ffffff',
  height:"322rpx"
 })
 }
})

总结

以上内容为本文的全部介绍，希望能为读者的学习或工作提供有价值的参考。如有疑问欢迎留言交流，感谢支持。

作者最新文章

JS转整数出现NaN怎么办？常见异常处理方案

2026-11-05 16:27:31

推荐几款免安装的在线JS压缩工具

2026-11-05 14:54:53

JS怎么使用JSON.stringify实现JSON格式化与缩进

2026-11-04 10:47:30

CodePen、JSFiddle 与 StackBlitz：主流 JS 在线编辑器对比

2026-11-03 21:07:49

JS字符串转数字后怎么正确判断是否为有效数值

2026-11-03 20:04:15