Pus*_*ela 2 javascript dom background linear-gradients
body.style.background = 无法在 script.js 包含的文件中工作，其他一切都可以工作，兑现的 dom 选择器可以工作，输入 body.style.background = 'red'; 有效，但不在包含文件中
我已经尝试过console.logs，如下面的代码中所述，输出的奇特之处是，如果我从回调中复制日志并将其粘贴到body.style.background中，它可以工作，但不能在脚本文件中。
color_1 = document.querySelector("#color-1");
color_2 = document.querySelector("#color-2");
body = document.querySelector("body");
function changeBackgroundColor() {
body.style.background = "linear-gradient(to right, "+color_1.value+ ", "+ color_2.value+");";
//************* I am getting the console.logs but the background's not changing
console.log("linear-gradient(to right, " + color_1.value + ", " + color_2.value + ");");
}
//************* Both the listeners work fine and the cashed selectors
color_1.addEventListener("input", changeBackgroundColor);
color_2.addEventListener("input", changeBackgroundColor);<html>
<head>
<title>Background Color Generator</title>
<!-- Custom Styles -->
<style type="text/css">
body {
background: linear-gradient(to right, red , yellow);
}
</style>
</head>
<body>
<div class="container">
<input id="color-1" type="color">
<input id="color-2" type="color">
</div>
</body>
</html>当颜色输入更改但没有任何反应时，背景应该更改颜色。
为了像这样通过 JavaScript 进行线性渐变，您需要访问该body.style.backgroundImage属性。然后您可以传入linear-gradient字符串来构建渐变。
function changeBackgroundColor() {
body.style.backgroundImage = "linear-gradient(to right, "+ color_1.value +", "+ color_2.value +")";
还有一点需要注意的是，每当您传递字符串时（在本例中或任何时候您以这种方式设置 CSS 属性），都不需要提供;CSS 所需的尾随。所以你的行是：
"linear-gradient(to right, "+ color_1.value +", "+ color_2.value +");";
;注意你那里的第一个。应该删除它，留下这个字符串：
"linear-gradient(to right, "+ color_1.value +", "+ color_2.value +")";
您可以在 MDN 上找到一些示例：
https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
在 W3Schools 上：
https ://www.w3schools.com/jsref/prop_style_backgroundimage.asp