为何使用变量设置backgroundColor不生效？请解析原因

这个问题其实是JavaScript对象属性访问方式的典型坑点，我来给你掰扯清楚：

当你用.操作符去访问对象的属性时，JavaScript会把.后面的名字直接当作固定的属性名，而不是去读取变量里的值。举个例子，你写div.style.prop = 'red'的时候，浏览器其实是在给div.style这个对象新增一个叫prop的属性，值设为'red'——这完全不是你想要的设置backgroundColor的操作！

那怎么用变量来动态设置属性呢？得用方括号语法。方括号里可以放变量，JavaScript会先解析变量的内容，再去访问对应的属性。修改后的代码应该是这样：

var div = document.getElementById('test')
var prop = 'backgroundColor'
div.innerHTML = 'This is some text'
div.style[prop] = 'red' // 这样就会正确读取prop变量里的'backgroundColor'，设置背景色为红色

简单总结一下：

• 点语法适合你明确知道属性名的时候用，比如div.style.backgroundColor = 'red'
• 方括号语法适合动态属性名的场景，尤其是属性名存在变量里的时候

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