使用 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;
  }

我认为这只是在 css 上添加background-color:yellow的问题。 我也想改变宽度，可以通过添加宽度500px来完成吗？ 到 animation 的末端？

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

正如 Emiel Zuurbier 评论的那样，您的 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 3

你做得很好，你也很好地构建了你的 CSS 文件，并且你已经正确地编写了 DOM 操作。 .change.bar2 class 的大括号}只是一个错字。

您只需要更改您的 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

正如已经建议的那样，有一个错字，以下代码有效。

 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>