将document.body.style.backgroundColor赋值变量后修改失效原因？

这个问题本质是基础数据类型的赋值规则和DOM属性的更新机制共同导致的，具体原因如下：

• document.body.style.backgroundColor 是字符串类型的属性，属于JavaScript的基础数据类型，所有基础数据类型的赋值都是值拷贝，不是引用传递。你执行let backgroundColor = document.body.style.backgroundColor的时候，只是把当前body的背景色字符串复制了一份存到backgroundColor变量里，这个变量和document.body.style对象上的backgroundColor属性没有任何关联。
• 后续你执行backgroundColor = 新色值的操作，只是修改了backgroundColor这个变量本身存储的字符串内容，并没有对document.body.style对象的属性做任何修改，自然不会触发浏览器的页面重绘，所以页面背景不会变化。
• 直接写document.body.style.backgroundColor = 新色值时，你是直接修改了DOM元素的style属性，浏览器会监听DOM style属性的变更，自动更新对应的页面样式，所以功能正常。

如果你需要用变量暂存新生成的色值，可以先计算好色值再赋值给DOM属性，示例如下：

const btn = document.querySelector('.btn');
const color = document.querySelector('.color');
const colors = ["green", "red", "rgba(133,122,200)", "#f15025"];

btn.addEventListener('click', function() {
    // 先计算随机色值存到变量
    const newBackgroundColor = colors[Math.floor(Math.random() * colors.length)];
    // 把变量存储的色值赋值给DOM属性触发页面更新
    document.body.style.backgroundColor = newBackgroundColor;
    console.log(newBackgroundColor);
})

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