如何在JavaScript中更改CSS变量

CSS变量也被称为自定义属性（custom properties），它们是在CSS3中引入的一种新特性，用于定义一组可以被任意元素使用的属性。在本文中，我们将介绍如何使用JavaScript来更改CSS变量。

定义CSS变量

在CSS中，我们可以使用--前缀来定义一个CSS变量，如下所示：

:root {
  --primary-color: red;
  --secondary-color: green;
}

在这个例子中，我们定义了两个CSS变量： --primary-color和--secondary-color。我们将这些变量定义在:root选择器下面，这样它们就可以在文档的任何地方访问。

获取和设置CSS变量

要获取CSS变量的值，我们可以使用getComputedStyle()函数和getPropertyValue()方法。如下所示：

const element = document.querySelector(".my-element");
const styles = getComputedStyle(element);
const primaryColor = styles.getPropertyValue("--primary-color");
console.log(primaryColor);

在这个例子中，我们首先使用document.querySelector()方法获取了一个名为my-element的元素，并使用getComputedStyle()方法获取了元素的计算样式。然后，我们使用getPropertyValue()方法获取了--primary-color变量的值，并将其打印到控制台上。

要设置CSS变量的值，我们可以使用setProperty()方法。如下所示：

const element = document.querySelector(".my-element");
element.style.setProperty("--primary-color", "blue");

在这个例子中，我们首先使用document.querySelector()方法获取了一个名为my-element的元素，并使用setProperty()方法将--primary-color变量的值设置为blue。

实际应用

我们可以在CSS中使用CSS变量，以便更轻松地定制网站的主题。如下所示：

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

body {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

button {
  background-color: var(--primary-color);
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
}

在这个例子中，我们定义了两个CSS变量： --primary-color和--secondary-color，并将它们用于网站的背景色、文本颜色和按钮颜色。

现在，假设我们希望为网站提供两个主题：light和dark。我们可以使用JavaScript来更改CSS变量的值，从而实现主题的切换。如下所示：

const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');

function switchTheme(e) {
    if (e.target.checked) {
        document.documentElement.setAttribute('data-theme', 'dark');
        localStorage.setItem('theme', 'dark');
    }
    else {
        document.documentElement.setAttribute('data-theme', 'light');
        localStorage.setItem('theme', 'light');
    }    
}

toggleSwitch.addEventListener('change', switchTheme, false);

const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;

if (currentTheme) {
    document.documentElement.setAttribute('data-theme', currentTheme);

    if (currentTheme === 'dark') {
        toggleSwitch.checked = true;
    }
}

在这个例子中，我们在HTML中添加了一个复选框，并使用addEventListener()方法将switchTheme()函数与复选框的change事件关联起来。当用户切换主题时，switchTheme()函数将首先更改网站的根元素的data-theme属性，然后将当前主题保存在本地存储中。

最后，我们可以在网站的JavaScript代码中使用CSS变量，从而更轻松地定制主题。如下所示：

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

[data-theme="dark"] {
  --primary-color: #20c997;
  --secondary-color: #adb5bd;
}

body {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

button {
  background-color: var(--primary-color);
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
}

在这个例子中，我们为data-theme="dark"选择器重新定义了--primary-color和--secondary-color变量的值。当用户切换主题时，这些值也将相应地更新。