背景颜色渐变应该随着我更改调色板颜色而改变。但背景颜色不会改变，并与相应 CSS 文件中给出的默认颜色保持不变。
var css = document.querySelector("h3");
var css = document.querySelector(".color1");
var css = document.querySelector(".color2");
var body = document.getElementById("Gradient");
function setGradient(){
body.style.background = "linear-gradient(to right,"
+ color1.value
+ ","
+ color2.value
+ ")";
css.textContent = body.style.background;
}
color1.addEventListener("input", setGradient);
color2.addEventListener("input", setGradient);
这是 JavaScript 文件。
<!DOCTYPE html>
<html>
<title>Gradient Background</title>
<link rel="stylesheet" type="text/css" href="style.css">
<body id="Gradient">
<h1>Background Generator</h1>
<input class="color1" type="color" name="color1" value="#00ff00">
<input class="color2" type="color" name="color2" value="#ff0000">
<h2>Current CSS Background</h2>
<h3></h3>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
这是相应的 HTML 文件。
body{
font: 'Raleway', san-serif;
color: rgba(0,0,0,0.5);
text-align: center;
text-transform: uppercase;
letter-spacing: 0.5em;
top: 15%;
background: linear-gradient(to right, red, yellow);
}
h1{
font: 600 3.5em 'Raleway', san-serif;
color: rgba(0,0,0,0.5);
text-align: center;
text-transform: uppercase;
letter-spacing: 0.5em;
width: 100%;
}
h3{
font: 900 1em 'Raleway', san-serif;
color: rgba(0,0,0,0.5);
text-align: center;
text-transform: none;
letter-spacing: 0.01em;
}
这是相应的 CSS 文件。
这里有一个类似的问题，有人说使用“body.style.backgroundImage”，但这也不起作用。
问题出在 Javascript 上。您已经定义了与 3 个变量相同的名称。
这是更新后的代码：
var css = document.querySelector("h3");
var color1 = document.querySelector(".color1");
var color2 = document.querySelector(".color2");
var body = document.getElementById("Gradient");
function setGradient(){
body.style.background = "linear-gradient(to right,"
+ color1.value
+ ","
+ color2.value
+ ")";
css.textContent = body.style.background;
}
color1.addEventListener("input", setGradient);
color2.addEventListener("input", setGradient);body{
font: 'Raleway', san-serif;
color: rgba(0,0,0,0.5);
text-align: center;
text-transform: uppercase;
letter-spacing: 0.5em;
top: 15%;
background: linear-gradient(to right, red, yellow);
}
h1{
font: 600 3.5em 'Raleway', san-serif;
color: rgba(0,0,0,0.5);
text-align: center;
text-transform: uppercase;
letter-spacing: 0.5em;
width: 100%;
}
h3{
font: 900 1em 'Raleway', san-serif;
color: rgba(0,0,0,0.5);
text-align: center;
text-transform: none;
letter-spacing: 0.01em;
}<!DOCTYPE html>
<html>
<title>Gradient Background</title>
<link rel="stylesheet" type="text/css" href="style.css">
<body id="Gradient">
<h1>Background Generator</h1>
<input class="color1" type="color" name="color1" value="#00ff00">
<input class="color2" type="color" name="color2" value="#ff0000">
<h2>Current CSS Background</h2>
<h3></h3>
<script type="text/javascript" src="script.js"></script>
</body>
</html>