Переключить цвет фона RGB - PullRequest
0 голосов
/ 22 февраля 2020

Я пытаюсь переключить цвет фона с RGB на solid. Я использую Изменить внутренний 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>;
}
}

1 Ответ

0 голосов
/ 22 февраля 2020

Предположим, что цвет solid, который нам нужен, - зеленый. Итак, давайте создадим класс с именем 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...