Question

我有一个用JS编写的简单函数，在调用时，会检查元素的当前背景颜色。如果它是某种颜色，那么它将变为另一种颜色，如果它是另一种颜色，那么它将变回第一种颜色 - 就像切换一样。

我遇到的唯一问题是函数的第一次调用永远不会起作用，但我无法解决原因。即使我期待它变成蓝色？

＆＃13;

function changeBgColor() {
  var x = document.getElementById(dest_1);
  var dest_bgColor = x.style.backgroundColor;

  if (dest_bgColor === "aquamarine") {
    x.style.backgroundColor = "blue";
  } else {
    x.style.backgroundColor = "aquamarine";
  }

  return;
}

＆＃13;

.selectBox {
  display: block;
  width: 100px;
  height: 100px;
  background-color: aquamarine;
}

＆＃13;

<a href="#" id="dest_1" class="selectBox" onclick="changeBgColor()">A</a>

＆＃13;

Answer 1

虽然浏览器使用样式规则中的颜色渲染元素，但规则不会设置元素style.backgroundColor。一般来说，依赖这些属性中的值是个坏主意，你应该始终保持/切换一个单独的变量，然后只有 set style.x。

要查找实际值，您可以使用getComputedStyle(x).backgroundColor。在您的示例中，这会返回rgb(127, 255, 212)，而不是aquamarine。

var cols = ["aquamarine", "blue"];
var index = 0;

function changeBgColor() {
  var x = document.getElementById("dest_1");
  // move to next color
  index = (index + 1) % cols.length;
  x.style.backgroundColor = cols[index];
  return;
}

.selectBox {
  display: block;
  width: 100px;
  height: 100px;
  background-color: aquamarine;
}

<a href="#" id="dest_1" class="selectBox" onclick="changeBgColor()">A</a>

Javascript - 改变元素颜色的功能，但第一次调用永远不会起作用

1 个答案: