切换 RGB 背景颜色答案

【问题标题】：Toggle RGB Background Color切换 RGB 背景颜色
【发布时间】：2020-02-22 00:32:23
【问题描述】：

我正在尝试将背景颜色从 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>;
}
}

【问题讨论】：

您的函数 tog() 未使用正确的 JavaScript 语法。您正在将常规 html 与它混合。如果您打开浏览器控制台并输入tog，您将看到由于语法错误而未定义。
此外，您能否更好地描述这一点：我正在尝试将背景颜色从 RGB 切换为纯色。您要更改哪个元素的背景颜色？整个页面？

标签： javascript html css rgb innerhtml

【解决方案1】：

假设我们想要的纯色是绿色。那么让我们创建一个名为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>

【讨论】：