background-color与backgroundColor的有什么区别

在 CSSOM 中这样写到

For example
if the user agent supports the -webkit-transform
property, there would be a webkitTransform IDL attribute. There would
also be a WebkitTransform IDL attribute because of the rules for
camel-cased attributes.

例如
如果用户代理支持-webkit-transform 属性，因为驼峰命名的规则 会有webkitTransform IDL属性。也会有一个WebkitTransform IDL属性

说到这里大家应该明白点了。
我们最开始 a.style，a的style属性的值是一个对象。
这个对象所包含的属性与CSS规则一一对应，但是名字需要用驼峰命名的方式进行改变，比如background-color写成backgroundColor。改写的规则是将横杠从CSS属性名中去除，然后将横杠后的第一个字母大写。如果CSS属性名是JavaScript保留字，则规则名之前需要加上字符串css，比如float写成cssFloat，而改写后的 backgroundColor 就是 IDL属性。

注意： “-” 在JS 中 是 减法的意思，变量名中是不能用“-”的

总结

说了这么多概念，我们简单理解就是， 像backgroundColor 与 background-color 这样的属性，他们的属性值是一样的，改变两个中任何一个属性的值，另一个属性的值也会随之改变，但是JS中变量不能用“-”，所以可以通过每个CSS属性 对应的 IDL属性，来获取和设置 CSS属性，所以JS 有background-color 这样的属性，只是不能这样显示出来，但是我们最开始的写成 a.style['background-color']，这样就不受“-”的影响了，所以也能获取到属性值。