小程序 CSS var 变量与 JS 动态样式交互指南

2023-12-21 17:05:54

引言

在小程序开发中，灵活控制样式是至关重要的。CSS 变量的出现，为动态修改样式提供了强大的工具。通过将 CSS 变量与 JS 变量关联，开发人员可以实现样式属性的实时更改，从而创建更具交互性、响应性和可定制性的应用程序。

理解 CSS 变量

CSS 变量，又称 CSS 自定义属性，允许您定义可重用的变量，并在整个样式表中使用它们。这些变量以 -- 前缀开头的，例如 --primary-color。

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
}

与 JS 变量交互

为了使 CSS 变量与 JS 变量交互，我们需要使用 CSS.setProperty() 方法。该方法接收两个参数：第一个参数是 CSS 变量的名称（不带 -- 前缀），第二个参数是新值。

const root = document.documentElement;
root.style.setProperty('--primary-color', 'red');

这段代码将 --primary-color CSS 变量的值动态地更改为红色。

实际案例

动态主题切换

使用 CSS 变量和 JS，您可以轻松地实现动态主题切换。创建一个 CSS 变量来存储主题颜色，然后使用 JS 在不同的主题之间切换。

:root {
  --theme-color: #007bff;
}

.btn {
  background-color: var(--theme-color);
}

const body = document.body;

function toggleTheme() {
  if (body.classList.contains('dark-theme')) {
    body.classList.remove('dark-theme');
    root.style.setProperty('--theme-color', '#007bff');
  } else {
    body.classList.add('dark-theme');
    root.style.setProperty('--theme-color', '#212529');
  }
}

交互式滑块

创建一个自定义滑块组件，允许用户动态调整其颜色。使用 CSS 变量来存储滑块的当前值，并使用 JS 根据用户输入更新变量的值。

:root {
  --slider-value: 50%;
}

.slider {
  background-color: var(--slider-value);
}

const slider = document.querySelector('.slider');

function updateSlider(e) {
  const value = e.target.value;
  root.style.setProperty('--slider-value', value + '%');
}