切换 RGB 背景颜色

Question

我试图能够将背景颜色从 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>;
}
}

Answer 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>

切换 RGB 背景颜色

问题描述

1 个解决方案

解决方案1
0 2020-02-22 00:53:28

切换 RGB 背景颜色

问题描述

1 个解决方案

解决方案1 0 2020-02-22 00:53:28

解决方案1
0 2020-02-22 00:53:28