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