Question

我正在使用以下代码在第一次点击时将吉他弦的颜色首先变为红色，然后在第二次点击时将浅蓝色变为红色，依此类推，然后在两种颜色之间。第一次点击时字符串变为红色，但是随后点击仍保持红色，我不明白为什么。

var string = document.getElementById("a-string");
if (string.backgroundColor !== "red") {
  string.style.backgroundColor = "red";
} else {
  string.style.backgroundColor = "lightblue";
}

Cam有谁知道为什么这不应该像我期望的那样工作？

Answer 1

您的代码几乎没有错误。错误为string.backgroundColor !== "red"。它应该是string.style.backgroundColor !== "red"

var string = document.getElementById("a-string");
if (string.style.backgroundColor !== "red")  {
  string.style.backgroundColor = "red";
} 
else {
  string.style.backgroundColor = "lightblue";
}

Answer 2

＆＃13;

var string = document.getElementById("a-string");
if (string.style.backgroundColor !== "red") {
  string.style.backgroundColor = "red";
} else {
  string.style.backgroundColor = "lightblue";
}

＆＃13;

div{
font-size:30px;
}

＆＃13;

<div id="a-string"> A Sample Text</div>

＆＃13;

Answer 3

<强>备注

用classList.toggle()缩短它。为元素设置默认背景颜色。使用包含其他背景颜色的类切换。

var btn = document.querySelector("button"),
  div = document.querySelector("div");

btn.addEventListener("click", function() {
  div.classList.toggle("bg-red");
});

div {
  width: 50px;
  height: 50px;
  background: lightblue;
}

.bg-red {
  background: red;
}

<div></div>
<button id="btn">Toggle background color</button>

（背景色）开关不起作用

3 个答案: