为何JS中用background-color赋值报错，而backgroundColor正常？

嘿，这个问题问得特别到位！其实核心原因和JavaScript的语法规则以及DOM样式对象的设计逻辑有关，咱们一步步说：

1. 连字符在JS里的特殊含义 #

DOM元素的style属性本质是一个JavaScript对象，而JS里的标识符（也就是对象属性名的常规写法）不能包含连字符（-）——因为连字符在JS中是减法运算符。

当你写element.style.background-color = ...时，JavaScript会把它错误解析成：

(element.style.background) - color = ...

这就变成了试图把element.style.background的值减去color变量的结果赋值给某个东西，但左边是一个表达式，不是合法的赋值目标，所以就会抛出“赋值运算符左侧存在错误”的报错。

2. 驼峰式属性名是DOM的统一规范 #

为了避开连字符的语法冲突，DOM API给所有带连字符的CSS属性都提供了驼峰式的别名：把CSS属性名里的连字符去掉，连字符后面的第一个字母大写。比如：

• CSS的background-color → JS里的backgroundColor
• CSS的font-size → JS里的fontSize
• CSS的border-radius → JS里的borderRadius

这种驼峰式的属性名符合JS的标识符规则，所以直接赋值element.style.backgroundColor = 随机颜色值是完全合法的，也就不会报错。

3. 非要用带连字符的属性名怎么办？ #

如果你习惯了CSS的写法，一定要用background-color这个名称，也可以用JS的方括号属性访问语法，把属性名作为字符串传入：

document.getElementById('one').style['background-color'] = col;

这种方式下，JS会把字符串'background-color'当作属性名直接处理，不会解析成减法运算，同样能正常设置背景色。

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