JavaScript中如何将变量嵌入CSS样式？以transform属性设置为例

你的代码中样式不生效的核心问题是transform属性值末尾多了一个多余的分号，导致CSS语法错误。以下是修正方案和正确的变量嵌入方法：

修正后的代码 #

let second = document.querySelector('.second');
let secondNed = 0;

setInterval(function () {
    secondNed += 6;
    if (secondNed === 360) { // 推荐使用全等判断，避免类型匹配问题
        secondNed = 0;
    }
    second.style.transform = `rotate(${secondNed}deg)`; // 移除属性值里的分号
    console.log(secondNed);
}, 1000);

正确的变量嵌入方式 #

1. ES6模板字符串（推荐） #

用反引号``包裹整个属性值，通过${变量名}将JavaScript变量插入到指定位置，语法简洁可读性强。注意：element.style.transform接收的是CSS属性值本身，不是完整的CSS声明，所以不需要加末尾的分号。

2. 传统字符串拼接（兼容旧环境） #

如果项目需要兼容不支持ES6的环境，可以用加号拼接字符串：

second.style.transform = 'rotate(' + secondNed + 'deg)';

3. CSS自定义属性（CSS变量）方案 #

如果需要在多个CSS规则中复用这个角度变量，可以先在CSS中定义自定义属性：

.second {
    --rotate-deg: 0deg;
    transform: rotate(var(--rotate-deg));
}

然后在JavaScript中修改这个变量的值：

second.style.setProperty('--rotate-deg', `${secondNed}deg`);

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