Question

在这里完成新手。我正在尝试创建一个不是线性渐变类型版本的背景生成器，当我访问色轮时，背景不会改变。这是它的代码。

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>

Answer 1

您几乎拥有它，当您尝试分配正文的背景颜色时，需要删除的是 "#" 之前的 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>

纯色背景生成器不会显示任何背景

1 个答案: