Изменение цвета фона с помощью CSS / JavaScript

Question

Я пытаюсь изменить цвет фона на желтый с помощью JavaScript, но установка цвета фона на желтый не работает.

<a id="mobile-nav" href="#">
  <div class="container" onclick="myFunction(this)">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3">.
    </div>
  </div>
</a>
<script>
  function myFunction(x) {
    x.classList.toggle('change');
  }
</script>

Css

.container {
  display: inline-block;
  cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
  width: 39px;
  height: 30px;
  border-radius: 100px;
  background-color: #333;
  margin: 20px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-345deg) translate(-9px, 6px);
}

.change .bar2 {
  opacity: 6;
  transform: rotate(3000deg);
  .change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
    background-color: yellow;
  }

Я думал, что это просто вопрос добавления background-color:yellow в css. Я также хотел бы изменить ширину, это можно сделать, добавив width 500px; на конец анимации?

Answer 1

Закройте ваше правило для .change .bar2, используя }, тогда оно будет работать:

function myFunction(x) {
  x.classList.toggle('change');
}

.container {
  display: inline-block;
  cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
  width: 39px;
  height: 30px;
  border-radius: 100px;
  background-color: #333;
  margin: 20px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-345deg) translate(-9px, 6px);
}

.change .bar2 {
  opacity: 6;
  transform: rotate(3000deg);
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
  background-color: yellow;
}

<a id="mobile-nav" href="#">
  <div class="container" onclick="myFunction(this)">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3">.</div>
  </div>
</a>

Answer 2

Как уже предлагалось, произошла опечатка, сработал следующий код.

const myFunction = (x) => {
  x.classList.toggle("change");
}

.container {
  display: inline-block;
  cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
  width: 39px;
  height: 30px;
  border-radius: 100px;
  background-color: #333;
  margin: 20px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-345deg) translate(-9px, 6px);
}

.change .bar2 {
  opacity: 6;
  transform: rotate(3000deg);
}
.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
  background-color: yellow;
}

<a id="mobile-nav" href="#">
  <div class="container" onclick="myFunction(this)">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3">.</div>
  </div>
</a>

Answer 3

У вас все отлично, также вы очень хорошо структурировали свой файл CSS и правильно написали манипуляции с DOM. Существует только опечатка закрытия скобки } класса .change .bar2.

Вам просто нужно изменить файл CSS.

Из этого -

.change .bar2 {
  opacity: 6;
  transform: rotate(3000deg);
  .change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
    background-color: yellow;
  }

На это -

.change .bar2 {
      opacity: 6;
      transform: rotate(3000deg);
}
.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
    background-color: yellow;
}

И все будет отлично.

Answer 4

Как прокомментировал Эмиель Зурбье, на вашем CSS есть опечатка:

.change .bar2 {
  opacity: 6;
  transform: rotate(3000deg);
  .change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
    background-color: yellow;
  }

Должно быть изменено на:

.change .bar2 {
  opacity: 6;
  transform: rotate(3000deg);
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
  background-color: yellow;
}