在这里完成新手。 我正在尝试创建一个不是线性渐变类型版本的背景生成器,当我访问色轮时,背景不会改变。这是它的代码。
var css = document.querySelector("h3");
var color1 = document.querySelector(".color1");
var body = document.getElementById("gradient");
function setGradient() {
body.style.background = "#"+ color1.value;
css.textContent = body.style.background + ";";
}
color1.addEventListener("input", setGradient);
<body id="gradient">
<h1>Background Generator</h1>
<input class="color1" type="color" name="color1" value="#00ff00">
<h2>Current CSS Background</h2>
<h3></h3>
</body>
答案 0 :(得分:2)
您几乎拥有它,当您尝试分配正文的背景颜色时,需要删除的是 "#"
之前的 color1.value
。 color1.value
中的值已经是十六进制颜色代码,因此它们具有起始哈希值。试试这个。
var css = document.querySelector("h3");
var color1 = document.querySelector(".color1");
var body = document.getElementById("gradient");
const currentColor = document.querySelector(".current");
function setGradient() {
body.style.background = color1.value;
css.textContent = body.style.background + ";";
}
color1.addEventListener("input", setGradient);
<body id="gradient">
<h1>Background Generator</h1>
<input class="color1" type="color" name="color1" value="#00ff00">
<h2>Current CSS Background</h2>
<h3></h3>
</body>