小程序中使用css var变量(使js可以动态设置css样式属性)

使用 CSS 变量可以大大提高开发效率，让我们能够一次性定义样式，然后全局使用。在小程序中使用 CSS 变量，可以使 JS 可以动态设置 CSS 样式属性。

下面是使用 CSS 变量（或者称为 CSS 自定义属性）的完整攻略：

在样式中定义变量

使用 CSS 变量需要在样式中先定义变量名及其对应的值，语法为：--变量名: 值;。例如：

:root {
  --main-color: #333;
  --text-color: #666;
}

这里借助了 :root 伪类，将变量定义在全局作用域下。

在样式中使用变量

定义好变量之后，就可以在样式中使用它。使用方式为 var(--变量名)，例如：

.container {
  background-color: var(--main-color);
  color: var(--text-color);
}

这样便可以在多个样式中重复使用同一变量，这样可以大大减少代码量。

在 JS 中设置变量值

在 JS 中使用 setProperty 方法，可以动态设置样式表中的变量。

假设我们有如下 HTML 结构：

<view id="test">Hello, world!</view>

然后，我们可以在 JS 中这样设置 background-color 变量的值：

var test = document.getElementById('test');
test.style.setProperty('--main-color', 'red');

这样，#test 元素的背景色就会变成 red。

示例说明

示例1：改变菜单颜色

假设我们在小程序中有一个菜单，我们需要改变菜单项的颜色。我们可以先定义一个变量：--menu-item-color，然后在样式中使用变量：

.menu-item {
  color: var(--menu-item-color);
}

然后，在 JS 中动态设置 --menu-item-color 变量的值：

wx.request({
  url: 'https://example.com/api/theme/config',
  method: 'GET',
  success: function(res) {
    var color = res.data.menuItemColor;
    document.documentElement.style.setProperty('--menu-item-color', color);
  }
})

这样，当调用 API 成功后，菜单项颜色就会变成动态获取的颜色。

示例2：切换夜间模式

我们经常需要为我们的小程序添加夜间模式，这既可以减少眼睛疲劳，还可以节省电池功耗。

假设我们已经有两套样式表：日间样式和夜间样式。我们可以定义两个变量：--main-color 和 --text-color，并分别在两个样式表中设置不同的值。

然后，在切换夜间模式时，我们可以动态切换样式表，同时也需要动态设置变量的值。

var nightMode = true;
var styleLink = document.getElementById('style-link');
var style = document.createElement('style');

function toggleMode() {
  if (nightMode) {
    style.setAttribute('id', 'night-mode');
    style.innerHTML = `
      :root {
        --main-color: #222;
        --text-color: #ccc;
      }
    `;
    styleLink.parentNode.insertBefore(style, styleLink);
    nightMode = false;
  } else {
    var nightStyle = document.getElementById('night-mode');
    nightStyle.parentNode.removeChild(nightStyle);
    nightMode = true;
  }
}

这样，我们便可以在按钮点击事件中调用 toggleMode 方法来切换日间/夜间模式了。