编辑“︁CSS变量与JavaScript”︁（章节）

= CSS变量与JavaScript =

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

== 介绍 ==

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

== 定义CSS变量 ==

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

<syntaxhighlight lang="css">
:root {
  --primary-color: #3498db;
  --padding: 10px;
}
</syntaxhighlight>

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

<syntaxhighlight lang="css">
.button {
  background-color: var(--primary-color);
  padding: var(--padding);
}
</syntaxhighlight>

== 通过JavaScript访问CSS变量 ==

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

<syntaxhighlight lang="javascript">
// 获取根元素
const root = document.documentElement;

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

== 通过JavaScript修改CSS变量 ==

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

<syntaxhighlight lang="javascript">
// 修改CSS变量的值
root.style.setProperty('--primary-color', '#e74c3c');
</syntaxhighlight>

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

== 实际应用案例 ==

=== 动态主题切换 ===

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

<syntaxhighlight lang="html">
<!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>
</syntaxhighlight>

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

=== 响应式布局调整 ===

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

<syntaxhighlight lang="javascript">
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');
  }
});
</syntaxhighlight>

== 作用域与继承 ==

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

<mermaid>
graph TD
  A[:root --primary-color: blue]
  B[div --primary-color: red]
  C[p 继承 --primary-color: red]
</mermaid>

== 数学计算与CSS变量 ==

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

<syntaxhighlight lang="css">
:root {
  --base-size: 16px;
}

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

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

== 浏览器兼容性 ==

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

<syntaxhighlight lang="javascript">
if (window.CSS && CSS.supports('--a', '0')) {
  console.log('支持CSS变量');
} else {
  console.log('不支持CSS变量');
}
</syntaxhighlight>

== 总结 ==

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

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

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS自定义属性]]