Question

我有一个简单的程序，您可以在其中选择一种颜色并用它填充一个框。我有一个4x4的box（divs）网格，我想检查所有divs（boxes）的backgroundColor是否有一个值，以便当所有box都填充有颜色时，网格会重置，并且所有box都再次为空白。

但是，我在执行此操作时遇到了一些问题。我的第一个想法是检查数组中的每个div（我使用过querySelectorAll）是否具有backgroundColor'red'或'blue'。我试图将数组项的backgroundColor存储到一个变量中，但是在我用控制台记录它时不会返回该字符串。

我还在Array上尝试了every（）方法，但这似乎不起作用。

所以我的问题是，如何在节点列表中获取元素的backgroundColor并检查该元素是否具有backgroundColor。

这是我的JavaScript代码：

var redColor = document.getElementById('red');
var blueColor = document.getElementById('blue');
var box = document.querySelectorAll('.box');
var colorPick = document.getElementById('color picker');


let currentColor = [];
Array.from(box);
console.log(box);

loadEventListeners();

function loadEventListeners(){

  redColor.addEventListener('click', pickRed);
  blueColor.addEventListener('click', pickBlue);
  for (i = 0; i < box.length; i++){
    box[i].addEventListener('click', addColor);
  }
};


function pickRed(e){

  currentColor.push('red');
  var textRed = document.createTextNode("You have selected red");
  colorPick.appendChild(textRed);
  console.log(currentColor);
}

function pickBlue(e){
  currentColor.push('blue')
  console.log(currentColor);
}


function addColor(e){

  if (currentColor.slice(-1)[0] === 'blue'){
    e.currentTarget.style.backgroundColor = 'blue'; 
  } else { e.currentTarget.style.backgroundColor = 'red'; 

  }

}

这是我使用的HTML：

    <!DOCTYPE html>
<html>
<head>
<style>

.container{

  grid-template-columns: repeat(5, 1fr);
  grid-column-gap: 200px;
  display: grid;
  align-items: auto;
  width: 50%;
  margin: auto;
}


.game-grid{
  display: grid;
  grid-template-columns: repeat(4, 100px);
  margin: 0;
}

#color-picker{
  display: grid;

  grid-template-rows: 100px 50px 50px;

}

.box{
  width: 100px;
  height: 100px;
  border: solid 2px;
}

#red{
  background-color: red;
  width: 50px;
  height: 50px;
}

#blue {
  background-color: blue;
  width: 50px;
  height: 50px;
}
</style>
</head>
<body>
  <div class="container">

    <div class="game-grid">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
      <div id="color picker">
        <h2>Pick a color!</h2>
          <div id="red"></div>
          <div id="blue"></div>
          <div id="green"></div>
    </div>
  </div>
</body>
</html>

谢谢您的帮助！

Answer 1

querySelectorAll的结果不是完整的数组。它更像是“类似于数组”的对象。但是它不支持every（或forEach或map ...）。

但是您可以使用Array.from使其成为一个真实的数组。

但是在您的代码中，您仅执行Array.from(box);。但是此代码没有任何作用，因为box不会被修改。您必须编写box = Array.from(box);或直接使用它：

Array.from(box).every(function(div) {
    return div.style.backgroundColor == 'blue' || div.style.backgroundColor == 'red';
});

Answer 2

您可以使用getComputedStyle获得元素的背景色。要获取节点列表中许多节点的背景色，可以使用Array.from将节点列表转换为真实数组，然后使用Array.prototype.every。

示例显示了如何使用getComputedStyle和Array.from。

const queryAll = (selector, node = document) => Array.from(node.querySelectorAll(selector));

const getComputedBG = node => window.getComputedStyle(node, null).getPropertyValue('background-color');



const $msgNode = document.querySelector('.msg');

const onClick = e => {
  $msgNode.textContent = getComputedBG(e.target);
}

queryAll('.box').forEach(node => {
  node.addEventListener('click', onClick);
});

.list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
  grid-gap: 10px;
  margin-bottom: 20px;
}

.box {
  background: #000;
}
.box--color1 {
  background: #c00;
}
.box--color2 {
  background: #00c;
}

<div class="list">
  <div class="box box--color1"></div>
  <div class="box box--color1"></div>
  <div class="box box--color2"></div>
  <div class="box box--color1"></div>
  <div class="box box--color2"></div>
  <div class="box box--color2"></div>
</div>
<div class="msg"></div>

Answer 3

好的，您差不多不错，但是我认为您没有花太多时间来设计行为。我不是100％地了解querySelector，但是您也可以使用getElementByClassName，它将为您提供一系列HTMLelement。

首先，对于颜色选择，我不会将元素压入Array中，而只是将一个字符串变量udpate称为 myCurrentColor 。

然后，我将使用我的redColor函数将myCurrentColor更改为红色，而将蓝色更改为相同的内容。

最后，对于您卡住的部分，我将保留您的addColor，但它看起来像这样：

addColor(htmlEl) {
 if(htmlEl.style.backgroundColor != 'blue' || htmlEl.style.backgroundColor != 'red') {
   htmlEl.style.backgroundColor = myCurrentColor;
 } else {
    return;
 }
}

示例：https://codepen.io/andrea06590/pen/WLzvpE

Answer 4

querySelectorAll返回不是数组的NodeList。它不具有map或filter之类的所有复杂数组方法。但是，您可以通过执行以下任一操作将其转换为数组：

let arr = Array.from(document.querySelectorAll('.box'))

或

let arr = [...document.querySelectorAll('.box')]

例如，一旦有了阵列，就可以让filter松动：

arr.filter(b => {
  let bg = b.style.backgroundColor;
  return bg === 'red' || bg === 'blue';
});

这将为您提供所有具有背景颜色设置的框的数组。

JavaScript检查div的背景色

4 个答案: