我正在尝试有一个按钮，可以将背景颜色恢复为加载页面时的渐变

Question

我一直在尝试不同的方法，但一直未能在网上找到问题的答案。我不知道如何使按钮将背景颜色恢复到加载页面时存在的默认颜色。

var css = document.querySelector("h3");
var color1 = document.querySelector(".color1");
var color2 = document.querySelector(".color2");
var body = document.getElementById("gradient");
var button = document.getElementById("resetbckg")
function setGradient() {
	body.style.background = "linear-gradient(to right, "
		 + color1.value 
		 +", "
		 + color2.value 
		 + ") ";
		 css.textContent = body.style.background + ";";
}
function reset() {
	document.body.style.background = "linear-gradient(to right, "
		 + color1.value 
		 +", "
		 + color2.value 
		 + ") ";
}
button.addEventListener("click", reset);

body {
	font: "raleway", sans-serif;
	color: rgba(0,0,0,.5);
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .5em;
	top: 15%;
	background: linear-gradient(to right, #3AC7E2, #A16DCE);
}

<input class="color1" type="color" name="color1" value="#00ff00">
<input class="color2" type="color" name="color2" value="#ff0000">
<div class="buffer col-12"></div>
<button id="resetbckg" onclick="reset()">Reset Background</button>

Answer 1

要删除正文的背景样式并恢复到css规则中的样式，只需设置document.body.style.background = ''。

var color1 = document.querySelector(".color1");
var color2 = document.querySelector(".color2");
function setGradient() {
document.body.style.background = "linear-gradient(to right, "
+ color1.value 
+", "
+ color2.value 
+ ") ";
}
function reset() {
document.body.style.background = "";
}

body {
font: "raleway", sans-serif;
color: rgba(0,0,0,.5);
text-align: center;
text-transform: uppercase;
letter-spacing: .5em;
top: 15%;
background: linear-gradient(to right, #3AC7E2, #A16DCE);
}

<input class="color1" type="color" name="color1" value="#00ff00">
<input class="color2" type="color" name="color2" value="#ff0000">
<div class="buffer col-12"></div>
<button onclick="setGradient()">Set Background</button><br/>
<button onclick="reset()">Reset Background</button>