WeChat development JS dynamic modification style

This article mainly introduces the implementation code for dynamically modifying the style of WeChat applet JS. The principle is to bind data and then dynamically modify the data to achieve dynamic style changes. Friends in need can refer to it

The pitfall of the WeChat applet is that js can dynamically modify the style. We cannot easily use js or jq to do it with one line of code. Or use removeClass addClass to modify the style.

The following is a method of dynamically modifying styles. The principle is to bind data and then dynamically modify the data to achieve dynamic style changes. It feels a bit... that kind of thing, weird. But there was nothing we could do. If you have a better method, you can share it in the comment area.

test.wxml

<view style="text-align: center;">
 <label style="color:{{color}};">我会变色</label>
 <button bindtap="clickRed">变红</button>
 <button bindtap="clickgreen">变绿</button>
</view>

test.js

Page({
 data: {
 color: "red"
 },
 clickRed: function () {
 this.setData({
  color: "red"
 })
 },
 clickgreen: function () {
 this.setData({
  color: "green"
 })
 }
})

Effect

##[Related recommendations]

1.

How to call global JS in WeChat development?

2.

Detailed explanation of examples of referencing other js files in WeChat development

3.

Example tutorial of life cycle functions in WeChat development

The above is the detailed content of WeChat development JS dynamic modification style. For more information, please follow other related articles on the PHP Chinese website!