WeChat mini-app JS dynamically modifies the implementation code of the style, mini-app js

Small Program JS dynamically modifies the implementation code of the style, small program js

Small Program, js, dynamic style modification, we can not easily deal with JavaScript or jq line of code. Alternatively, you can use removeClass addClass to modify the style.

The following is a dynamic style modification method. The principle is to bind data and then modify data dynamically to change the dynamic style. It feels a bit strange. But there is no way. If you have a better method, share it in the comment area.

Test. wxml

<View style = "text-align: center;"> <label style = "color: {color }}; "> I will change color </label> <button bindtap =" clickRed "> Red </button> <button bindtap =" clickgreen "> green </button> </view>

Test. js

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

Effect

The above is the implementation code of the small program JS dynamic style modification introduced by xiaobian. I hope it will be helpful to you. If you have any questions, please leave a message for me, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!