用 JavaScript 改变背景颜色

Question

我有一个主 div，其中包含 n * n 个 div，它们有黑色背景或白色背景。

我希望他们通过点击主 div 来更改他们的 BGcolor。

这是我的代码（显然不起作用）。

    function invert(){


   var divs = document.getsElementsByTagName("div");

   for(i=0; i<divs.length; i++){
          if(divs[i].style.backgroundColor=="black")
          {
            divs[i].style.backgroundColor="white";
          }
          else if (divs[i].style.backgroundColor=="white") 
          {
            divs[i].style.backgroundColor="black";
          }



   }

}

Answer 1

如果您没有明确设置背景颜色，它可能仍然是 ""（至少我在 Firefox 中看到的）所以您的 if 条件都不匹配。

如果您检测到当前颜色未设置，您也可以切换为黑色：

var color = divs[i].style.backgroundColor;  
if (color === "black")
    divs[i].style.backgroundColor = "white";
else if (!color || color === "white") 
    divs[i].style.backgroundColor = "black";

Answer 2

为所有DIVs 设置默认的白色背景色。

为其中一些添加black 类。

使用classList.toggle 交替颜色：

document.body.onclick= function() {
  var divs= document.querySelectorAll('div');
  for(var i = 0 ; i < divs.length ; i++) {
    divs[i].classList.toggle('black');
  }
}

body, html {
  height: 100%;
  background: lightyellow;
}

div {
  width: 50px;
  height: 50px;
  border: 1px solid #333;
  display: inline-block;
  background: white;
}

.black {
  background: black;
}

<div class="black"></div>
<div></div>
<div class="black"></div>
<div></div>
<div class="black"></div>
<div class="black"></div>
<div></div>
<div></div>

Answer 3

实现此目的的两种方法：

1-style.backgroundColor（如果你让背景颜色信息内联）：

function turnthelights() {
  
var x = document.querySelectorAll(".inner");
var i;
for (i = 0; i < x.length; i++) {
  
if (x[i].style.backgroundColor === "black"){
    x[i].style.backgroundColor = "white";
} else {
    x[i].style.backgroundColor = "black";      
}
}  
}

body {
  background-color: greenyellow;  
}

.inner {
  width: 80px;
  height: 80px;
  display: inline-block;  
  outline: 2px solid gold;
}

<div id=container onclick="turnthelights()"> 
  
<div class="inner" style="background-color: black"></div>  
<div class="inner" style="background-color: white"></div>  
<div class="inner" style="background-color: black"></div>  
<div class="inner" style="background-color: white"></div>  
<div class="inner" style="background-color: black"></div>
<div class="inner" style="background-color: white"></div>
  
</div>

2-getComputedStyle(element).backgroundColor（bg 颜色信息任何地方）：

function turnthelights() {
  
var x = document.querySelectorAll(".inner");
var i;
for (i = 0; i < x.length; i++) {

  var k = x[i];
  var z = getComputedStyle(k).backgroundColor;
  
if (z == "rgb(0, 0, 0)"){
    x[i].style.backgroundColor = "rgb(255, 255, 255)";
} else {
    x[i].style.backgroundColor = "rgb(0, 0, 0)";      
}
}  
}

body {
  background-color: hotpink;  
}

.inner {
  width: 80px;
  height: 80px;
  display: inline-block;  
  outline: 2px solid gold;
}

.black {
  background-color: rgb(0, 0, 0);  
}

.white {
  background-color: rgb(255, 255, 255);  
}

<div id=container onclick="turnthelights()"> 
  
<div class="inner black"></div>  
<div class="inner white"></div>  
<div class="inner black"></div>  
<div class="inner white"></div>  
<div class="inner black"></div>
<div class="inner white"></div>
  
</div>

Answer 4

现在2020，我找到了真正的解决方案，获取样式和设置样式必须使用不同的方法：

function changeColor(cell) {
    var red = "rgba(255, 4, 10, 1)"; //rgba or rgb, so if you really want to use this, you need use regexp. 
    var grey = "rgba(230, 230, 230, 1)"; //pls change your css to this too.


    var style = cell.computedStyleMap().get('background-color').toString();

    if (style == grey) {
        cell.style.backgroundColor = red;
    } else if (style == red) {
        cell.style.backgroundColor = grey;
    }
}

chrome 是可以的，但是，可能其他颜色格式的浏览器，你需要测试一下。