时间戳

首页 > 解决方案 > 纯色背景生成器不会显示任何背景

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

问题描述

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

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>

标签： javascriptcss

解决方案

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

推荐阅读