引言：CSS自定义属性与JavaScript的交互
css自定义属性（通常称为css变量）为前端开发带来了极大的灵活性，允许我们定义可重用的值，并在整个样式表中引用它们。它们通常在:root选择器中定义，以便全局访问。例如：
:root {
--primary-color: #007bff;
--font-size-base: 16px;
}在JavaScript中，我们可以通过document.documentElement.style.setProperty()方法动态地修改这些CSS变量的值，从而实现主题切换、字体大小调整等交互功能。document.documentElement指向HTML文档的根元素html>，是定义全局CSS变量的理想位置。
常见误区：直接引用变量名
在尝试将一个CSS变量的值设置为另一个CSS变量时，一个常见的错误是直接将目标变量的名称作为字符串传递给setProperty()方法。考虑以下场景，我们希望将--currentfont变量的值设置为--onpxfont变量的值：
// 错误的示例
document.documentElement.style.setProperty('--currentfont', 'onpxfont');这段代码的问题在于，它并没有将--currentfont设置为--onpxfont所代表的实际像素值（例如10px），而是将其设置为一个普通的字符串"onpxfont"。CSS解析器在遇到font-size: onpxfont;这样的声明时，会认为onpxfont是一个无效的字体大小值，从而导致样式失效。这是因为setProperty()方法期望接收的是一个有效的CSS值字符串，而不是一个CSS变量的引用方式。
正确姿势：使用var()函数引用CSS变量
要正确地将一个CSS变量的值设置为另一个CSS变量的值，我们需要遵循CSS本身引用变量的语法，即使用var()函数。var()函数是CSS中用于引用自定义属性的内置函数。因此，在JavaScript中通过setProperty()设置时，需要将var(--variable-name)作为一个完整的字符串值传递。
立即学习“Java免费学习笔记（深入）”；
修正后的代码示例如下：
// 正确的示例
document.documentElement.style.setProperty('--currentfont', 'var(--onpxfont)');通过这种方式，setProperty()将'var(--onpxfont)'这个字符串赋值给--currentfont。当浏览器解析--currentfont时，它会识别出var(--onpxfont)并进一步解析--onpxfont的实际值（例如10px），从而正确应用样式。
完整示例：动态字体大小与主题切换
下面是一个完整的示例，演示如何通过JavaScript和var()函数实现动态字体大小调整。
HTML 结构 (index.html)
动态CSS变量示例
字体大小
主题颜色
这是一段示例文本，用于演示字体大小的动态变化。
当前字体大小为：var(--currentfont)
CSS 样式 (style.css)
:root {
/* Colors*/
--white: #fff;
--dark: #000;
--purple: #9051ff;
--crimson: crimson;
--black: #0c192c;
--orange: #ffa500; /* Added orange for completeness */
/* Font Sizes*/
--onpxfont: 10px;
--onikipxfont: 12px;
--ondortpxfont: 14px;
--onaltipxfont: 16px;
--currentfont: var(--onikipxfont); /* Default font size */
--current-theme-color: var(--purple); /* Default theme color */
}
body {
font-size: var(--currentfont); /* Apply the current font size */
font-family: sans-serif;
margin: 20px;
color: var(--dark); /* Example usage of another variable */
background-color: var(--white);
}
.customize-theme {
border: 1px solid #eee;
padding: 15px;
border-radius: 8px;
max-width: 300px;
margin-bottom: 20px;
background-color: var(--white);
}
.customize-theme h3 {
margin-top: 0;
margin-bottom: 10px;
color: var(--dark);
}
.font-size-options {
list-style: none;
padding: 0;
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.font-size-options li {
cursor: pointer;
padding: 8px 12px;
border: 1px solid #ccc;
border-radius: 5px;
display: flex;
align-items: center;
gap: 5px;
transition: all 0.2s ease;
}
.font-size-options li:hover {
border-color: var(--purple);
}
.font-size-options li.active {
background-color: var(--current-theme-color); /* Use theme color for active state */
color: var(--white);
border-color: var(--current-theme-color);
}
.font-size-options img {
width: 16px;
height: 16px;
vertical-align: middle;
filter: invert(0%); /* Default icon color */
}
.font-size-options li.active img {
filter: invert(100%); /* Invert icon color for active state */
}
.color-options {
display: flex;
gap: 10px;
}
.color-options span {
width: 30px;
height: 30px;
border-radius: 50%;
cursor: pointer;
border: 2px solid transparent;
transition: border-color 0.2s ease;
}
.color-options span:hover {
border-color: var(--dark);
}
.color-options span.active {
border-color: var(--current-theme-color); /* Highlight active color */
}
/* Example of using current-theme-color */
h3 {
color: var(--current-theme-color);
}JavaScript 逻辑 (script.js)
document.addEventListener('DOMContentLoaded', () => {
const root = document.documentElement;
// 字体大小选项
const fontSizeOptions = document.querySelectorAll('.font-size-options li');
fontSizeOptions.forEach(option => {
option.addEventListener('click', function() {
// 移除所有选项的active类
fontSizeOptions.forEach(item => item.classList.remove('active'));
// 添加active类到当前点击的选项
this.classList.add('active');
// 获取data属性中定义的CSS变量名
const fontVarName = this.dataset.fontVar;
// 正确地设置--currentfont，引用另一个CSS变量
root.style.setProperty('--currentfont', `var(${fontVarName})`);
});
});
// 主题颜色选项
const colorOptions = document.querySelectorAll('.color-options span');
colorOptions.forEach(option => {
option.addEventListener('click', function() {
// 移除所有颜色选项的active类
colorOptions.forEach(item => item.classList.remove('active'));
// 添加active类到当前点击的颜色选项
this.classList.add('active');
// 获取data属性中定义的CSS变量名
const colorVarName = this.dataset.colorVar;
// 设置--current-theme-color，引用另一个CSS变量
root.style.setProperty('--current-theme-color', `var(${colorVarName})`);
// 重新应用字体大小的active样式，确保颜色更新
const currentActiveFont = document.querySelector('.font-size-options li.active');
if (currentActiveFont) {
currentActiveFont.classList.remove('active'); // 临时移除
currentActiveFont.classList.add('active'); // 重新添加，触发样式更新
}
});
});
// 初始化设置
// 确保页面加载时，根据默认值设置正确的active状态
const initialActiveFont = document.querySelector('.font-size-options li.active');
if (initialActiveFont) {
const initialFontVar = initialActiveFont.dataset.fontVar;
root.style.setProperty('--currentfont', `var(${initialFontVar})`);
}
const initialActiveColor = document.querySelector('.color-options span.active');
if (initialActiveColor) {
const initialColorVar = initialActiveColor.dataset.colorVar;
root.style.setProperty('--current-theme-color', `var(${initialColorVar})`);
} else {
// 如果没有预设active颜色，则默认选中第一个或某个特定颜色
if (colorOptions.length > 0) {
colorOptions[0].classList.add('active');
root.style.setProperty('--current-theme-color', `var(${colorOptions[0].dataset.colorVar})`);
}
}
});注意事项与最佳实践
- var() 函数的必要性：始终记住，当您希望通过JavaScript将一个CSS变量的值设置为另一个CSS变量的引用时，必须使用'var(--variable-name)'这种格式。直接使用变量名字符串是无效的。
- 语义化变量命名：为CSS变量选择有意义的名称，如--primary-color、--font-size-large，而不是--red、--onpxfont。这有助于提高代码的可读性和可维护性。
- 回退值：var()函数支持回退值，例如var(--undefined-variable, #ccc)。如果--undefined-variable未定义，则会使用#ccc。这在处理可能缺失的变量时非常有用。
- 管理活动状态：在示例中，我们通过添加/移除active类来管理用户界面的视觉状态。这是一种常见的做法，可以清晰地分离样式和行为。
- 事件委托：对于大量相似的交互元素（如字体大小选项），可以考虑使用事件委托，将事件监听器添加到它们的共同父元素上，从而减少内存开销和提高性能。
- *数据属性（`data-）**：在HTML元素上使用data-*属性来存储与JavaScript交互相关的数据（如data-font-var`），可以使HTML和JavaScript之间的耦合更松散，代码更清晰。
- DOMContentLoaded：确保在DOM完全加载后再执行JavaScript代码，以避免因元素未加载而导致的错误。
通过遵循这些原则，您可以有效地利用CSS自定义属性和JavaScript的强大功能，创建高度动态和可定制的用户界面。
