gpt4 book ai didi

javascript - 线性渐变在 Chrome 上没有响应,但在 FireFox 上有响应,为什么?

转载 作者:行者123 更新时间:2023-11-28 00:02:44 25 4
gpt4 key购买 nike

我为实时背景渐变生成器编写了这段代码,但它不适用于 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/

25 4 0
文章推荐: jquery - 防止 css 转换在多个 mouseenter 上重叠
文章推荐: css - React Modals 在页面加载时瞬间可见
文章推荐: html - 如何在