我正在尝试将背景色从RGB切换为纯色。我正在使用更改内部HTML来更改背景颜色，这是我要的，但是我无法使其起作用，我不确定是什么问题，我从未做过更改内部HTML的工作，所以我有点初学者。
这是我到目前为止所拥有的HTML：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js"></script>
</head>
<body oncontextmenu="return false" onkeydown="return false;" onmousedown="return false;">
<div id="toggle">
<div class="wrapper">
<button onclick="tog()">Toggle</button>
</div>
</div>
</body>
</html>
这就是我对CSS的要求
.wrapper {
margin:0px;
height: 200%;
width: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
background: linear-gradient(
124deg,
#ff2400,
#e81d1d,
#e8b71d,
#e3e81d,
#1de840,
#1ddde8,
#2b1de8,
#dd00f3,
#dd00f3
);
background-size: 1800% 1800%;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
animation: rainbow 18s ease infinite;
}
@-webkit-keyframes rainbow {
0% {
background-position: 0% 82%;
}
50% {
background-position: 100% 19%;
}
100% {
background-position: 0% 82%;
}
}
@-moz-keyframes rainbow {
0% {
background-position: 0% 82%;
}
50% {
background-position: 100% 19%;
}
100% {
background-position: 0% 82%;
}
}
@-o-keyframes rainbow {
0% {
background-position: 0% 82%;
}
50% {
background-position: 100% 19%;
}
100% {
background-position: 0% 82%;
}
}
@keyframes rainbow {
0% {
background-position: 0% 82%;
}
50% {
background-position: 100% 19%;
}
100% {
background-position: 0% 82%;
}
}
这是我到目前为止使用的JavaScript
let rgb;
function tog(){
if(rgb = <div class="wrapper">
<button onclick="tog()">Toggle</button>
</div>){
toggle.innerHTML = <button onclick="tog()">Toggle</button>;
}else{
toggle.innerHTML = <div class="wrapper">
<button onclick="tog()">Toggle</button>
</div>;
}
}
假设我们想要的纯色是绿色。因此，我们创建一个名为solid-color的类：
.solid-color{
background: green;
}
您的JavaScript语法错误
希望以下代码将帮助您实现目标：
let wrapper = document.querySelector('.wrapper');
function tog() {
if (wrapper.classList.contains('solid-color')) {
wrapper.classList.remove('solid-color');
} else {
wrapper.classList.add('solid-color');
}
}.wrapper {
margin: 0px;
height: 200%;
width: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
background: linear-gradient( 124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
animation: rainbow 18s ease infinite;
}
.solid-color {
background: green;
}
@-webkit-keyframes rainbow {
0% {
background-position: 0% 82%;
}
50% {
background-position: 100% 19%;
}
100% {
background-position: 0% 82%;
}
}
@-moz-keyframes rainbow {
0% {
background-position: 0% 82%;
}
50% {
background-position: 100% 19%;
}
100% {
background-position: 0% 82%;
}
}
@-o-keyframes rainbow {
0% {
background-position: 0% 82%;
}
50% {
background-position: 100% 19%;
}
100% {
background-position: 0% 82%;
}
}
@keyframes rainbow {
0% {
background-position: 0% 82%;
}
50% {
background-position: 100% 19%;
}
100% {
background-position: 0% 82%;
}
}<div id="toggle">
<div class="wrapper">
<button onclick="tog()">Toggle</button>
</div>
</div>