理解CSS自定义属性与JavaScript的交互
CSS自定义属性（通常称为CSS变量）为前端开发带来了极大的灵活性，允许我们定义可重用的值。而JavaScript则提供了强大的能力来动态地读取和修改这些属性，最常用的方法是通过element.style.setProperty(propertyName, value)。
在使用setProperty方法时，propertyName参数是一个字符串，它代表了要设置的CSS自定义属性的完整名称（例如--primary-color）。当这个属性名称需要根据JavaScript中的变量动态生成时，正确的字符串拼接方式至关重要。
常见问题：变量名未被正确评估
许多开发者在尝试动态拼接CSS自定义属性名时，可能会遇到一个常见的陷阱，导致JavaScript变量被当作字符串字面量而不是其值。
考虑以下场景，我们希望根据循环变量 i 和另一个变量 totalServicesLines 来设置一系列带有延迟的CSS自定义属性：
立即学习“Java免费学习笔记（深入）”；
// 假设 root 是一个DOM元素，例如 document.documentElement
// 假设 i 和 totalServicesLines 是 JavaScript 变量
let root = document.documentElement;
let i = 1;
let totalServicesLines = 3;
// 错误的尝试：
root.style.setProperty('--services-box-delay-"' + i + '"', totalServicesLines + "s");
// 或者更常见的错误形式，意图是拼接，但语法有误：
// root.style.setProperty('--services-box-delay-"+ i +"', totalServicesLines + "s");在这种错误的尝试中，开发者可能期望 i 的值（例如 1）能够被插入到属性名中，生成 --services-box-delay-1。然而，由于字符串拼接的语法问题，实际生成的CSS自定义属性名可能是 --services-box-delay-"i" 或者 --services-box-delay-"1" (如果使用 '"'+ i +'"')。这意味着JavaScript变量 i 并未被正确地求值并嵌入到字符串中，或者嵌入的方式导致了不符合预期的属性名。
解决方案：正确的字符串拼接方法
要解决这个问题，关键在于理解JavaScript的字符串拼接规则，并确保变量在字符串字面量中被正确地求值。
方法一：使用传统的字符串拼接 (+ 运算符)
这是JavaScript中最基本的字符串拼接方式。通过将字符串字面量与变量用 + 运算符连接起来，可以确保变量的值被正确地插入到最终的字符串中。
let root = document.documentElement;
let i = 1;
let totalServicesLines = 3;
// 正确的拼接方式：
root.style.setProperty('--services-box-delay-' + i, totalServicesLines + 's');解析： 当 i 的值为 1 时： '--services-box-delay-' + i 会被评估为 '--services-box-delay-' + 1，最终生成字符串 '--services-box-delay-1'。 totalServicesLines + 's' 会被评估为 3 + 's'，最终生成字符串 '3s'。
因此，完整的调用将是 root.style.setProperty('--services-box-delay-1', '3s');，这正是我们期望的结果。
方法二：使用模板字面量 (推荐，ES6+)
模板字面量（Template Literals）是ES6引入的一种更现代、更简洁的字符串拼接方式。它使用反引号 (`) 来定义字符串，并允许通过 ${expression} 语法直接在字符串中嵌入表达式。
let root = document.documentElement;
let i = 1;
let totalServicesLines = 3;
// 推荐的拼接方式（使用模板字面量）：
root.style.setProperty(`--services-box-delay-${i}`, `${totalServicesLines}s`);解析： 使用模板字面量，--services-box-delay-${i} 会直接将 i 的值嵌入到字符串中，生成 '--services-box-delay-1'。同样，${totalServicesLines}s 会生成 '3s'。这种方式代码更清晰，可读性更强，尤其是在涉及多个变量或复杂表达式时。
示例代码
下面是一个更完整的示例，展示如何在循环中动态设置多个CSS自定义属性：
动态设置CSS自定义属性
Box 0
Box 1
Box 2
在上述示例中，JavaScript循环会动态地为 --services-box-delay-0、--services-box-delay-1 和 --services-box-delay-2 设置不同的动画延迟值。这些值随后被CSS中的 animation-delay: var(...) 使用，从而实现每个盒子动画的错开效果。
注意事项与总结
- JavaScript变量与CSS自定义属性的区别： 请明确，我们讨论的是在JavaScript代码中，如何正确地构造一个字符串，这个字符串恰好是CSS自定义属性的名称。i 和 totalServicesLines 是JavaScript变量，而 --services-box-delay-X 则是CSS自定义属性。
- CSS自定义属性命名规范： CSS自定义属性名必须以 -- 开头，并且区分大小写。通常建议使用小写字母和连字符。
- 模板字面量的优势： 对于复杂的字符串拼接，特别是需要嵌入多个变量或表达式时，模板字面量 (``) 提供了更清晰、更易读的语法，是现代JavaScript开发的首选。
- 动态性： setProperty 方法的强大之处在于其动态性，它允许我们在运行时根据用户交互、数据加载或其他逻辑来调整UI样式，而无需修改CSS文件本身。
通过本文的讲解和示例，相信您已经掌握了在JavaScript中正确动态设置CSS自定义属性名称的关键技巧，避免了常见的字符串拼接错误。正确利用这些技术，将使您的前端代码更具动态性和可维护性。
