javascript - 如何获取由javascript创建的动态表的css属性？

Question

这是用于创建动态表格的 javascript 代码，它创建了一个填字游戏

function generateTable(range) {
    document.write("<table style='border: 1px solid black;'>");
    for (var a = 1; a < 10; a++) {
        document.write("<tr >");
        for (var b = 1; b < 10; b++) {
            if (a % 2 == 0 && b % 2 == 0) {
                document.write("<td style='border: 1px solid black;'><button style='width:50px; height:50px; background-color:black'></button></td>");
            } else {
                document.write("<td style='border: 1px solid black;'><button style='width:50px; height:50px; background-color:white' ></button></td>");
            }
        }
        document.write("</tr>");
    }
    document.write("</table>");
}

输出是这样的

我想计算 n 个具有不同功能的黑盒我已经尝试使用 getelementsbytagname() 但它不起作用请帮我解决这个问题

Answer 1

我建议您使用 CSS 进行显示。为此，您必须为每个 按钮 添加类。

function generateTable(range) {
  document.write("<table>");
  for (var a = 1; a < range; a++) {
    document.write("<tr >");
    for (var b = 1; b < range; b++) {
      if (a % 2 == 0 && b % 2 == 0) {
        document.write("<td ><button class='black'></button></td>");


      } else {
        document.write("<td ><button class='white'></button></td>");
      }
    }
    document.write("</tr>");
  }
  document.write("</table>");
}
generateTable(10);

console.log("total Black " + document.getElementsByClassName("black").length); //<-- count of black
console.log("total white " + document.getElementsByClassName("white").length); //<-- count of white
//using query selector
console.log("total Black " + document.querySelectorAll(".black").length); //<-- count of black
console.log("total white " + document.querySelectorAll(".white").length); //<-- count of white

table,
td {
  border: 1px solid black;
}

button.black {
  width: 50px;
  height: 50px;
  background-color: black;
}

button.white {
  width: 50px;
  height: 50px;
  background-color: white;
}