使用JavaScript更改背景颜色

change background color with JavaScript

本文关键字：背景 颜色 JavaScript 使用      更新时间：2023-11-06

我有一个包含n*n个div的主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";
          }

   }
}

如果你没有明确设置背景色，它可能仍然是""（至少我在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";

将所有DIV的默认背景色设为白色。

向其中一些添加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>

实现这一点的两种方法：

1-style.backgroundColor（如果您让bg颜色信息内联）：

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>

现在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来说，这是可以的，但是，也许其他浏览器有其他颜色格式，你需要测试它。

相关文章：