我如何修复 DOM 背景渐变颜色

Question

当我将事件侦听器放入输入类型 =“颜色”时，颜色没有改变。

let css = document.querySelector("h3");
let color1 = document.querySelector(".color1");
let color2 = document.querySelector(".color2");
let body = document.getElementById("gradient");


color1.addEventListener("input", updateColor);

function updateColor() {
    body.style.background = `linear-gradient(to-right, ${color1.value}, ${color2.value})`;
}

color2.addEventListener("input", function () {
    body.style.background = `linear-gradient(to-right, ${color1.value}, ${color2.value})`;
});

Answer 1

to right 不是 to-right。我也优化了你的代码。对于 color1 和 color2 输入，您可以使用相同的 updateColor() 函数。

let css = document.querySelector("h3");
let color1 = document.querySelector(".color1");
let color2 = document.querySelector(".color2");
let body = document.getElementById("gradient");


color1.addEventListener("input", updateColor);
color2.addEventListener("input", updateColor);

function updateColor() {
  body.style.backgroundImage = `linear-gradient(to right, ${color1.value}, ${color2.value})`;
}

<body id="gradient">
  <h3>Gradient</h3>
  <input type="color" class="color1">
  <input type="color" class="color2">
</body>

我如何修复 DOM 背景渐变颜色

How can i fix DOM baclground gradient colors

javascript

dom-events