我正在尝试使用一个按钮,将背景色还原为加载页面时的渐变色

问题描述 投票:0回答:1

我一直在尝试不同的方法,但没有设法在线找到我的问题的答案。我不知道如何使按钮将背景颜色还原为加载页面时存在的默认颜色。

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>
javascript html css
1个回答
0
投票

要删除实体的背景样式并恢复为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>
© www.soinside.com 2019 - 2024. All rights reserved.