根据用户选择更改渐变颜色

Question

我正在尝试根据用户选择更改渐变的颜色，一切正常，但我只是不知道如何使用我拥有的格式更改渐变。 (change.style.background = "linear-gradient(90deg, color1, red)";).

const len = document.querySelectorAll("input").length;
let change = document.querySelector(".body");

for (let x = 0; x < len; x++) {
    document.querySelectorAll("input")[x].addEventListener("input", function() {
        let color1 = this.value;
        if (this.getAttribute("name")==="color1") {
            change.style.background = "linear-gradient(90deg, color1, red)";
        }
    });
}

.body{
  background:linear-gradient(90deg, blue, red);
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body class="body">
    <h1>Background Generator</h1>
    <input type="color" name="color1" value="#996DAD">
    <input type="color" name="color2" value="#23AD23">
  </body>
</html>

Answer 1

您可以使用 template literals 将颜色选择器值动态插入到 CSS。

此外，您可以利用 "event delegation" 并只设置一个事件处理程序，而不是遍历所有元素然后为每个 input 元素设置事件处理程序。

const picker1 = document.querySelector("input[name='color1']");
const picker2 = document.querySelector("input[name='color2']");

// No need to loop over all the input elements and set up an event
// handler for each. Just set up one event handler at a common ancestor
// of the elements you care about and let the event bubble up to be 
// handled there
document.addEventListener("input", function(event){
  // Now test to see if the event was triggered by an element you 
  // wish to handle
  if(event.target.classList.contains("colorPicker")){
    // Use template literals to insert JS values into a string:
    document.body.style.background = 
      `linear-gradient(90deg, ${picker1.value}, ${picker2.value})`;
  }
});

.body{
  background:linear-gradient(90deg, blue, red);
}

<!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="styles.css">
      </head>
      <body class="body">
        <h1>Background Generator</h1>
        <input type="color" name="color1" value="#996DAD" class="colorPicker">
        <input type="color" name="color2" value="#23AD23" class="colorPicker">
    
        <script src="script.js" charset="utf-8"></script>
      </body>
    </html>

根据用户选择更改渐变颜色

Change color of gradient based on user selection

javascript

css

linear-gradients