理解动态CSS自定义属性与JavaScript变量
css自定义属性（通常称为css变量）提供了一种强大的机制，允许开发者在css中定义可复用的值。例如，--main-color: blue;。这些属性可以通过javascript进行读取和设置，从而实现动态的样式控制。element.style.setproperty(propertyname, value, priority) 方法是javascript中操作css自定义属性的核心方式。
当需要根据JavaScript变量的值来动态生成CSS自定义属性的名称时，例如，创建一系列像--item-delay-1、--item-delay-2这样的属性，就需要正确地将JavaScript变量嵌入到属性名的字符串中。常见的错误在于字符串拼接不当，导致JavaScript变量被当作字面量处理，而非其对应的数值或字符串值。例如，如果期望的属性名是--services-box-delay-1，却错误地得到了--services-box-delay-i，这就是典型的变量未被正确求值的问题。
正确拼接动态属性名的方法
为了确保JavaScript变量的值能够正确地嵌入到CSS自定义属性名中，我们有两种主要的字符串拼接方法：传统的字符串连接符（+）和现代的模板字面量。
方法一：传统字符串拼接（使用 + 操作符）
虽然现代JavaScript更推荐使用模板字面量，但了解传统的字符串拼接方法仍有必要。关键在于确保变量在拼接时能够被正确求值，而不是被视为字符串的一部分。
假设我们有两个JavaScript变量：i（表示索引）和 totalServicesLines（表示总行数）。我们希望设置的CSS自定义属性名为--services-box-delay-后接i的值，其值为totalServicesLines后接s。
立即学习“Java免费学习笔记（深入）”；
错误的拼接示例（可能导致变量被字面化）：
// 这种写法在某些情况下可能导致误解或意外行为，
// 尤其是在复杂的引号嵌套中，可能导致 'i' 被当作字面量。
// root.style.setProperty('--services-box-delay-"+ i +"', totalServicesLines + "s");
// 正如问题中描述，可能导致 '--services-box-delay-"i"' 这样的结果。上述代码段的意图是好的，但在某些上下文或误解下，可能会导致i被错误地视为字符串字面量。正确的传统拼接方式应该避免这种潜在的歧义。
正确的传统拼接方式： 要将变量i的值嵌入到字符串中，应直接使用+操作符进行连接。
const root = document.documentElement; // 通常指:root
const i = 1; // 示例变量
const totalServicesLines = 3; // 示例变量
// 正确的传统字符串拼接
root.style.setProperty('--services-box-delay-' + i, totalServicesLines + 's');
// 结果：CSS变量名将是 --services-box-delay-1，值为 3s
// 这等同于在CSS中定义 --services-box-delay-1: 3s;在这个例子中，'--services-box-delay-'是一个字符串字面量，i是JavaScript变量，totalServicesLines + 's'是另一个字符串表达式。+操作符会确保i和totalServicesLines的值被求出并转换为字符串，然后与其它字符串片段连接起来。
方法二：使用模板字面量（ES6+推荐）
模板字面量（Template Literals），使用反引号（`）定义，并允许通过${expression}语法直接嵌入JavaScript表达式。这是现代JavaScript中处理动态字符串的最佳实践，因为它极大地提高了代码的可读性和简洁性，并有效避免了传统拼接中可能出现的引号混淆问题。
const root = document.documentElement; // 通常指:root
const i = 1; // 示例变量
const totalServicesLines = 3; // 示例变量
// 使用模板字面量设置CSS自定义属性
root.style.setProperty(`--services-box-delay-${i}`, `${totalServicesLines}s`);
// 结果：CSS变量名将是 --services-box-delay-1，值为 3s
// 这等同于在CSS中定义 --services-box-delay-1: 3s;使用模板字面量，代码意图清晰明了：--services-box-delay-是固定部分，${i}会将变量i的值直接插入到该位置。同样，totalServicesLines的值也被清晰地嵌入到s单位之前。
完整示例
以下是一个完整的HTML、CSS和JavaScript示例，演示如何在一个循环中动态创建并设置多个CSS自定义属性，并将其应用于页面元素。
HTML (index.html):
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态CSS变量示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>动态服务列表</h1>
<div class="services-container">
<div class="service-box" data-index="1">服务项 1</div>
<div class="service-box" data-index="2">服务项 2</div>
<div class="service-box" data-index="3">服务项 3</div>
<div class="service-box" data-index="4">服务项 4</div>
</div>
<script src="script.js"></script>
</body>
</html>CSS (style.css):
:root {
/* 默认值或占位符 */
--base-delay: 0s;
}
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
background-color: #f4f4f4;
}
.services-container {
display: flex;
gap: 20px;
margin-top: 30px;
}
.service-box {
width: 120px;
height: 120px;
background-color: #4CAF50;
color: white;
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
opacity: 0;
transform: translateY(20px);
animation: fadeInSlideUp 0.8s forwards; /* 使用 forwards 保持动画结束状态 */
/* 动画延迟将通过 JS 动态设置 */
}
/* 定义动画 */
@keyframes fadeInSlideUp {
from {
opacity: 0;
transform: translateY(20px); 
