微信小程序通过js动态修改css样式的方法

封面图 • 2025-11-18 • 小程序

在微信小程序中，由于其使用的是 WXML 和 WXSS 的结构，不支持直接通过 JavaScript 动态修改 CSS 样式（如 `document.styleSheets` 或 `element.style`），但可以通过以下几种方式实现动态修改样式的效果：

---

## ✅ 方法一：使用 `style` 属性绑定

### 1. 在 WXML 中使用 `style` 绑定
你可以通过 JS 动态计算样式值，并将其绑定到 `style` 属性上。

#### 示例代码：

**WXML 文件：**
```html
<view style="{{dynamicStyle}}">动态样式内容</view>
```

**JS 文件：**
```javascript
Page({
  data: {
    dynamicStyle: ''
  },
  onLoad() {
    // 动态设置样式
    const color = '#ff0000';
    const fontSize = '20px';
    this.setData({
      dynamicStyle: `color:${color}; font-size:${fontSize};`
    });
  }
});
```

---

## ✅ 方法二：使用 `class` 动态切换

### 1. 定义多个 CSS 类
在 WXSS 文件中定义不同的类：

**WXSS 文件：**
```css
.red-text {
  color: red;
}
.blue-text {
  color: blue;
}
```

### 2. 在 JS 中动态切换类名

**WXML 文件：**
```html
<view class="{{currentClass}}">动态类名内容</view>
```

**JS 文件：**
```javascript
Page({
  data: {
    currentClass: 'red-text'
  },
  onLoad() {
    // 切换为蓝色
    this.setData({
      currentClass: 'blue-text'
    });
  }
});
```

---

## ✅ 方法三：使用 `dataset` + `wx.createSelectorQuery()` 获取节点样式（仅限部分场景）

如果你需要获取某个元素的样式再进行操作，可以使用 `wx.createSelectorQuery()` 查询节点信息。

### 示例：

**WXML 文件：**
```html
<view id="myView" style="color:red;">获取样式内容</view>
```

**JS 文件：**
```javascript
Page({
  onLoad() {
    const query = wx.createSelectorQuery().in(this);
    query.select('#myView').boundingClientRect(res => {
      console.log(res); // 可以获取到宽高、位置等信息
      // 但是不能直接修改样式
    }).exec();
  }
});
```

> ⚠️ 注意：`wx.createSelectorQuery()` 无法直接修改样式，只能用于获取节点信息。

---

## ✅ 方法四：使用 `@import` 或 `style` 标签动态加载样式（不推荐）

虽然可以在 JS 中动态生成 `<style>` 标签插入到页面中，但微信小程序对 DOM 操作有限制，这种方法可能不稳定或被限制使用。

---

## ✅ 总结

| 方法 | 是否推荐 | 说明 |
|------|----------|------|
| 使用 `style` 属性绑定 | ✅ 推荐 | 简单灵活，适合大部分场景 |
| 使用 `class` 动态切换 | ✅ 推荐 | 更易维护，适合预设样式 |
| `wx.createSelectorQuery()` | ⚠️ 一般 | 只能获取信息，不能直接修改样式 |
| 动态插入 `<style>` 标签 | ❌ 不推荐 | 微信小程序不支持 |

---

如果你有更具体的场景（比如根据变量动态改变背景色、字体大小等），欢迎告诉我，我可以提供更详细的代码示例。