CSS变量与JavaScript[编辑 | 编辑源代码]

CSS变量（也称为自定义属性）是一种强大的工具，允许开发者在CSS中定义可复用的值，并通过JavaScript动态修改它们。这种特性使得网页的样式可以更加灵活和交互式。本教程将详细介绍如何在CSS中定义变量，以及如何通过JavaScript访问和修改这些变量。

介绍[编辑 | 编辑源代码]

CSS变量是使用`--`前缀定义的属性，可以在整个样式表中重复使用。它们的作用域可以是全局（`:root`选择器）或局部的（特定元素）。JavaScript可以通过`getComputedStyle()`和`setProperty()`方法来读取和修改这些变量，从而实现动态样式调整。

定义CSS变量[编辑 | 编辑源代码]

CSS变量通常在`:root`选择器中定义，以确保全局可用。语法如下：

:root {
  --primary-color: #3498db;
  --padding: 10px;
}

这些变量可以在任何CSS规则中使用，通过`var()`函数引用：

.button {
  background-color: var(--primary-color);
  padding: var(--padding);
}

通过JavaScript访问CSS变量[编辑 | 编辑源代码]

JavaScript可以通过`getComputedStyle()`方法获取元素的样式，并使用`getPropertyValue()`读取CSS变量的值。以下是一个示例：

// 获取根元素
const root = document.documentElement;

// 获取CSS变量的值
const primaryColor = getComputedStyle(root).getPropertyValue('--primary-color');
console.log(primaryColor); // 输出: #3498db

通过JavaScript修改CSS变量[编辑 | 编辑源代码]

JavaScript还可以动态修改CSS变量的值，从而实时改变页面样式。使用`style.setProperty()`方法：

// 修改CSS变量的值
root.style.setProperty('--primary-color', '#e74c3c');

此时，所有使用`--primary-color`的元素都会立即更新为新的颜色。

实际应用案例[编辑 | 编辑源代码]

动态主题切换[编辑 | 编辑源代码]

CSS变量与JavaScript结合，可以实现动态主题切换。以下是一个完整的示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    :root {
      --bg-color: #ffffff;
      --text-color: #000000;
    }
    body {
      background-color: var(--bg-color);
      color: var(--text-color);
    }
  </style>
</head>
<body>
  <h1>动态主题切换</h1>
  <button onclick="toggleTheme()">切换主题</button>

  <script>
    function toggleTheme() {
      const root = document.documentElement;
      const currentBg = getComputedStyle(root).getPropertyValue('--bg-color').trim();

      if (currentBg === '#ffffff') {
        root.style.setProperty('--bg-color', '#222222');
        root.style.setProperty('--text-color', '#ffffff');
      } else {
        root.style.setProperty('--bg-color', '#ffffff');
        root.style.setProperty('--text-color', '#000000');
      }
    }
  </script>
</body>
</html>

点击按钮后，背景和文字颜色会动态切换。

响应式布局调整[编辑 | 编辑源代码]

CSS变量还可以用于响应式布局的动态调整。例如，根据窗口大小调整间距：

window.addEventListener('resize', () => {
  const root = document.documentElement;
  const screenWidth = window.innerWidth;

  if (screenWidth < 600) {
    root.style.setProperty('--padding', '5px');
  } else {
    root.style.setProperty('--padding', '15px');
  }
});

作用域与继承[编辑 | 编辑源代码]

CSS变量遵循CSS的层叠和继承规则。如果在局部作用域中重新定义变量，子元素会继承该值：

数学计算与CSS变量[编辑 | 编辑源代码]

CSS变量可以与`calc()`函数结合使用，实现动态计算：

:root {
  --base-size: 16px;
}

.text {
  font-size: calc(var(--base-size) * 1.5);
}

JavaScript可以动态修改`--base-size`，从而影响所有依赖它的样式。

浏览器兼容性[编辑 | 编辑源代码]

CSS变量在现代浏览器中广泛支持（IE除外）。可以通过以下方式检测支持性：

if (window.CSS && CSS.supports('--a', '0')) {
  console.log('支持CSS变量');
} else {
  console.log('不支持CSS变量');
}

总结[编辑 | 编辑源代码]

CSS变量通过`--`前缀定义，使用`var()`函数引用。
JavaScript可以通过`getComputedStyle()`和`setProperty()`动态读写CSS变量。
适用于主题切换、响应式布局、动态样式调整等场景。
遵循CSS层叠和继承规则，支持数学计算。

通过结合CSS变量和JavaScript，开发者可以创建更加灵活和交互式的网页体验。