我为实时背景渐变生成器编写了这段代码，但它不适用于 google chrome 但适用于 firefox 我做错了什么？
var color1 = document.querySelector(".color1");
var color2 = document.querySelector(".color2");
var body = document.getElementById("gradient");
function doGradient() {
body.style.background = "linear-gradient(to right, " +
color1.value +
"," +
color2.value +
")";
}
color1.addEventListener("input", doGradient)
color2.addEventListener("input", doGradient)
doGradient();<body id="gradient">
<h1>Gradient Generator</h1>
<input class="color1" type="color" name="color1" value="#00ff00">
<input class="color2" type="color" name="color2" value="#ff0000">
<h2>CSS Background</h2>
</body>在 Google Chrome 上没有响应或无法运行，但在 firefox 上运行完美
最佳答案
我想你忘了在 EventListener 中调用 doGradient。但是在@Jon 的编辑之后，他添加了调用函数。
color1.addEventListener("input", doGradient())
像这样尝试，我希望它能解决问题。
编辑:
如果你想在选择另一种颜色后应用渐变，你应该使用 change 事件监听器而不是 input。
关于javascript - 线性渐变在 Chrome 上没有响应，但在 FireFox 上有响应，为什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55907586/