跳到主要内容

CSS 变量与JavaScript

在现代Web开发中，CSS变量（也称为自定义属性）和JavaScript的结合为开发者提供了强大的工具，可以动态控制样式并创建灵活的Web设计。本文将逐步介绍如何使用CSS变量与JavaScript交互，并通过实际案例展示其应用场景。

什么是CSS变量？​

CSS变量是CSS中的自定义属性，允许你在样式表中定义可重用的值。它们以--开头，并通过var()函数在CSS中使用。例如：

css
:root {
  --primary-color: #3498db;
}

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

在上面的例子中，--primary-color是一个CSS变量，它被定义在:root选择器中，并在body的背景颜色中使用。

为什么需要与JavaScript结合？​

虽然CSS变量本身非常强大，但与JavaScript结合后，你可以动态地修改这些变量，从而实现更灵活的样式控制。例如，你可以根据用户的操作或系统的状态动态更改主题颜色、字体大小等。

如何使用JavaScript操作CSS变量​

1. 获取CSS变量的值​

你可以使用JavaScript获取CSS变量的值。假设我们有以下CSS：

css
:root {
  --primary-color: #3498db;
}

在JavaScript中，你可以这样获取--primary-color的值：

javascript
const rootStyles = getComputedStyle(document.documentElement);
const primaryColor = rootStyles.getPropertyValue('--primary-color').trim();
console.log(primaryColor); // 输出: #3498db

2. 修改CSS变量的值​

你可以使用JavaScript动态修改CSS变量的值。例如，以下代码将--primary-color的值更改为红色：

javascript
document.documentElement.style.setProperty('--primary-color', 'red');

3. 动态更新样式​

结合上述方法，你可以根据用户的操作动态更新样式。例如，以下代码在用户点击按钮时更改背景颜色：

html
<button id="changeColorBtn">Change Color</button>
javascript
const button = document.getElementById('changeColorBtn');
button.addEventListener('click', () => {
  document.documentElement.style.setProperty('--primary-color', 'green');
});

实际应用案例​

案例1：动态主题切换​

假设你正在开发一个支持暗模式和亮模式的网站。你可以使用CSS变量和JavaScript来实现动态主题切换。

css
:root {
  --background-color: white;
  --text-color: black;
}

[data-theme="dark"] {
  --background-color: black;
  --text-color: white;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}
javascript
const toggleThemeBtn = document.getElementById('toggleThemeBtn');
toggleThemeBtn.addEventListener('click', () => {
  const currentTheme = document.documentElement.getAttribute('data-theme');
  const newTheme = currentTheme === 'dark' ? '' : 'dark';
  document.documentElement.setAttribute('data-theme', newTheme);
});

案例2：响应式字体大小​

你可以根据屏幕宽度动态调整字体大小。

css
:root {
  --font-size: 16px;
}

body {
  font-size: var(--font-size);
}
javascript
window.addEventListener('resize', () => {
  const screenWidth = window.innerWidth;
  const newFontSize = screenWidth < 600 ? '14px' : '16px';
  document.documentElement.style.setProperty('--font-size', newFontSize);
});

总结​

CSS变量与JavaScript的结合为Web开发提供了极大的灵活性。通过动态修改CSS变量，你可以实现复杂的样式控制，如主题切换、响应式设计等。希望本文能帮助你理解并应用这一强大的技术。

附加资源与练习​

提示

尝试将CSS变量与JavaScript结合使用，探索更多动态样式的可能性！