Home > WeChat Applet > WeChat Development > WeChat development JS dynamic modification style

WeChat development JS dynamic modification style

零下一度
Release: 2017-05-26 10:36:25
Original
2020 people have browsed it

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>
Copy after login

test.js

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

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template