动态设置CSS自定义属性名：JavaScript变量拼接的正确实践

在JavaScript中动态设置CSS自定义属性名时，正确拼接包含多个变量的属性名需使用字符串模板字面量或传统字符串拼接方法，确保变量被正确求值而非作为字面量处理。

1. 传统字符串拼接（+ 操作符）

   原理：通过+将字符串字面量与变量值连接，确保变量被解析为实际值。

   示例：const root = document.documentElement;const i = 1;const totalServicesLines = 3;root.style.setProperty('--services-box-delay-' + i, totalServicesLines + 's');

   结果：生成CSS变量名--services-box-delay-1，值为3s。

   关键点：

   字符串字面量（如'--services-box-delay-'）与变量（如i）需通过+明确连接。

   避免引号嵌套错误，如错误示例中'--services-box-delay-"+ i +"'会导致变量被字面化。

2. 模板字面量（ES6+推荐）

   原理：使用反引号（`）定义字符串，通过${expression}嵌入变量，代码更简洁且可读性高。

   示例：const root = document.documentElement;const i = 1;const totalServicesLines = 3;root.style.setProperty(`--services-box-delay-${i}`, `${totalServicesLines}s`);

   结果：生成CSS变量名--services-box-delay-1，值为3s。

   优势：

   避免引号混淆，直接嵌入变量值。

   适合复杂字符串拼接场景，如嵌套变量或表达式。

• 错误场景：变量未被求值，导致属性名包含字面量变量名（如--services-box-delay-i）。

  原因：字符串拼接时未正确分离字面量与变量，或引号使用不当。

  规避方法：

  使用模板字面量时，确保变量用${}包裹。

  传统拼接时，检查+操作符是否正确连接所有部分。

以下是一个动态生成CSS变量并应用于动画延迟的完整流程：

1. HTML结构：

   <div class="services-container"> <div class="service-box" data-index="1">服务项 1</div> <div class="service-box" data-index="2">服务项 2</div></div>

2. CSS定义：

   .service-box { animation: fadeInSlideUp 0.8s forwards; /* 延迟通过JS动态设置 */}@keyframes fadeInSlideUp { from { opacity: 0; transform: translateY(20px); }}

3. JavaScript动态设置：

   const boxes = document.querySelectorAll('.service-box');boxes.forEach((box, index) => { const delay = (index + 1) * 0.2; // 动态计算延迟值 box.style.setProperty(`--box-delay-${index}`, `${delay}s`); // 在CSS中通过var(--box-delay-0)等引用});

• 优先使用模板字面量：代码更简洁，减少拼接错误风险。
• 变量命名清晰：确保属性名中的变量部分（如${i}）与业务逻辑一致。
• 测试验证：通过浏览器开发者工具检查生成的CSS变量名是否符合预期。

通过上述方法，可高效实现CSS自定义属性名与JavaScript变量的动态绑定，提升样式控制的灵活性与可维护性。