JavaScript body.style.background无法在script.js中使用线性渐变，但在控制台中可以正常工作

Question

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>

更改颜色输入但没有任何反应时，背景应更改颜色。

Answer 1

为了通过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/zh-CN/docs/Web/CSS/background-image

在W3Schools上：
https://www.w3schools.com/jsref/prop_style_backgroundimage.asp

Answer 2

您非常接近正确的答案。 您唯一需要做的就是从代码中删除; 在进行渐变更改的位置（因此应为color_2.value + ")"; 而不是color_2.value + ");"; 。

请注意，您要修改实际属性。 的; 只是CSS中使用的分隔符，用于区分不同的属性，从代码修改它们时就不需要它。

下面有一个有效的示例。

 color_1 = document.querySelector("#color-1"); color_2 = document.querySelector("#color-2"); body = document.querySelector("body"); function changeBackgroundColor() { body.style.backgroundImage = "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);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <head> <title>Background Color Generator</title> <!-- Custom Styles --> <style type="text/css"> body { height: 100vh; 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> <!-- Custom Javascript --> <script src="script.js"></script> </body> </html>

干杯!

JavaScript body.style.background无法在script.js中使用线性渐变，但在控制台中可以正常工作

问题描述

2 个解决方案

解决方案1
0 已采纳 2019-01-09 12:44:28

解决方案2
0 2019-01-09 12:46:01

JavaScript body.style.background无法在script.js中使用线性渐变，但在控制台中可以正常工作

问题描述

2 个解决方案

解决方案1 0 已采纳 2019-01-09 12:44:28

解决方案2 0 2019-01-09 12:46:01

解决方案1
0 已采纳 2019-01-09 12:44:28

解决方案2
0 2019-01-09 12:46:01