使用两个变量赋值CSS变量时出现EOF错误，求问题排查

你的代码问题出在CSS自定义属性名称的字符串拼接逻辑上——你错误地把" + i + "作为固定字符串写进了属性名里，导致最终生成的属性名是--services-box-delay-" + i + "，而不是把变量i的实际值嵌入进去。

正确写法 #

ES5 字符串拼接方式

root.style.setProperty('--services-box-delay-' + i, totalServicesLines + 's');

ES6 模板字符串方式（更简洁易读）

root.style.setProperty(`--services-box-delay-${i}`, `${totalServicesLines}s`);

说明 #

这样修改后，当变量i有具体值时（比如i=2），会生成正确的自定义属性名--services-box-delay-2；第二个参数里的totalServicesLines也能正确和s拼接成合法的CSS时间值（比如3s）。

内容的提问来源于stack exchange，提问作者Garavani