JavaScript body.style.background 不适用于 script.js 中的线性渐变，但在控制台中可以正常工作答案

【问题标题】：JavaScript body.style.background not working with linear-gradient in script.js but works fine in consoleJavaScript body.style.background 不适用于 script.js 中的线性渐变，但在控制台中可以正常工作
【发布时间】：2019-01-09 12:22:51
【问题描述】：

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 dom background linear-gradients

【解决方案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/en-US/docs/Web/CSS/background-image

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

【讨论】：

【解决方案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>

干杯！

【讨论】：