1.1 什么是CSS变量？
CSS变量，也叫做自定义属性（custom properties），是在CSS中声明的变量，可以用来存储值，比如颜色、尺寸、字体和其他CSS属性。它们提供了提高网页样式灵活性和可维护性的有效方式。
什么是CSS变量？
CSS变量是可以存储CSS属性值并在样式的不同部分重复使用的变量。它们通过双连字符（--）定义，可以在任何选择器中设置，但通常会在根选择器:root中定义，以便在整个文档中都可以使用。
例子：
CSS
:root {
--main-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}
CSS变量的主要特点：
- 可重用性：CSS变量允许你定义一个值并在CSS代码的不同部分多次使用。这有助于避免重复并简化样式管理。
- 灵活性：CSS变量的值可以根据条件改变，比如元素的状态或媒体查询。这使得创建更具适应性和动态性的样式成为可能。
- 继承性：CSS变量从父元素继承到子元素，这简化了样式的管理和组织。
- 可维护性：使用变量简化了代码的维护，因为变量值的改变会自动反映在所有使用这些变量的元素上。
1.2 CSS变量的使用示例
在JavaScript中使用CSS变量的例子：
JavaScript
document.documentElement.style.setProperty('--main-color', '#e74c3c');
示例1：定义和使用变量
CSS
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
}
a {
color: var(--primary-color);
}
a:hover {
color: darken(var(--primary-color), 10%);
}
HTML
<body>
<p>这是一段文字。</p>
<a href="#">这是一条链接</a>
</body>
解释：
- 在这个例子中定义了三个变量：
--main-bg-color、--main-text-color和--primary-color - 这些变量用于设置背景色、文字色和链接色
1.3 在JavaScript中改变变量的值
在这个示例中，变量用于设置页面主题。点击按钮时，变量的值会改变，导致背景和文字颜色的变化：
CSS
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
}
HTML
<button id="toggle-theme">切换主题</button>
<p>这是一段文字。</p>
JavaScript
document.getElementById('toggle-theme').addEventListener('click', () => {
const root = document.documentElement;
if (root.style.getPropertyValue('--main-bg-color') === '#f0f0f0') {
root.style.setProperty('--main-bg-color', '#333');
root.style.setProperty('--main-text-color', '#f0f0f0');
} else {
root.style.setProperty('--main-bg-color', '#f0f0f0');
root.style.setProperty('--main-text-color', '#333');
}
});
GO TO FULL VERSION