body.style.background设置linear-gradient在JS脚本文件中失效问题

嘿，我一眼就找到导致背景色不更新的问题了——你在给body.style.background赋值的时候，多添加了一个末尾的分号，这直接导致CSS属性值解析失败！

错误原因分析 #

看你的changeBackgroundColor函数里的这行代码：

body.style.background = "linear-gradient(to right, "+color_1.value+", "+ color_2.value+");";

注意字符串最后那个);里的分号，这是多余的！当我们通过JS的element.style设置属性时，只需要传入CSS属性值本身，不需要加CSS规则末尾的分号（分号是用来分隔多个CSS声明的，单个属性值不需要）。这个多余的分号会被当作属性值的一部分，浏览器无法识别这个无效的渐变语法，所以背景色不会变化。

而你在控制台直接输入body.style.background = 'red';能生效，是因为'red'是合法的属性值，没有多余的分号；至于你复制控制台日志内容到控制台生效，大概率是手动去掉了末尾的分号，或者控制台在解析时自动忽略了这个错误，但脚本里的字符串会被原封不动地传递给浏览器，所以就失效了。

修复后的代码 #

推荐使用ES6的模板字符串来拼接，更清晰不易出错，同时去掉多余的分号：

const color_1 = document.querySelector("#color-1");
const color_2 = document.querySelector("#color-2");
const body = document.querySelector("body");

function changeBackgroundColor() {
  // 去掉末尾的分号，用模板字符串简化拼接
  body.style.background = `linear-gradient(to right, ${color_1.value}, ${color_2.value})`;
  console.log(`linear-gradient(to right, ${color_1.value}, ${color_2.value})`);
}

color_1.addEventListener("input", changeBackgroundColor);
color_2.addEventListener("input", changeBackgroundColor);

另外建议给变量加上const声明，避免全局变量污染，这是更好的编码习惯。

验证效果 #

修改后，当你拖动颜色选择器时，body的渐变背景就会实时跟着变化啦，和你预期的效果一致。

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