如何获取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>");
}

输出是这样的

我想计算使用getelementsbytagname（）尝试过的具有不同功能的黑匣子中的n个，但是它不起作用，请帮助我

Answer 1

我建议您使用CSS进行显示。 为此，您必须将class添加到每个button 。

 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; } 

Answer 2

虽然可以通过样式属性查询，但我认为您最好使用类而不是像这样的内联样式创建后箱：

document.write("<td style='border: 1px solid black;'><button style='box box-black'></button></td>");

添加所需的CSS：

.box {
  width:50px;
  height:50px;
}

.box-black {
  background-color: black;
}

然后只需查询所需的类即可：

const blackBoxes = document.querySelectorAll('.box-black').length;

Answer 3

 function generateTable() { 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 id='blk' 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>"); console.log("BlackBox :"+ document.querySelectorAll('#blk').length) } generateTable() 

Answer 4

您可以将其用于黑盒的计数。 您可以通过标签名称获取元素。 您可以通过className来获取它，这是轻松获得计数的最好方法。

var list = document.getElementsByTagName("Button");
var count=0;
    for(var k=0;k<list.length;k++)
    {
        if(list[k].style.backgroundColor=='red')
            count++;
    }
console.log("number of black box--",count);

Answer 5

更改CSS的建议很棒，但是如果您有理由将其保留为原样并且仍然想要计算，那么您可以执行以下操作：

var list = document.getElementsByTagName("BUTTON");
var whites = 0, blacks=0;
for (var i=0; i < list.length; i++) {
    color = list[i].style.backgroundColor;
    if (color == 'white') whites++;
    else if (color == 'black') blacks++;

    // to add an index: 
    // list[i].setAttribute('data-index',i+10);
}

console.log('w:'+whites+", b:"+blacks);

参考： https : //www.w3schools.com/jsref/met_document_getelementsbytagname.asp