如何获取JavaScript生成的动态表格CSS属性并统计黑色方块数量？

我来帮你搞定这两个问题，咱们一个个说：

1. 获取动态表格的CSS属性 #

你的表格是用document.write生成的，要拿到它的CSS属性分两种场景：

场景1：获取内联样式（你直接写在元素style里的样式） #

直接通过元素的style属性就能拿到，比如要获取表格的边框样式：

// 先找到表格元素
const table = document.querySelector('table');
// 读取内联边框样式
const tableBorder = table.style.border;
console.log('表格内联边框:', tableBorder); // 输出 "1px solid black"

场景2：获取浏览器实际渲染的最终样式（包括继承/外部CSS） #

如果需要拿到浏览器计算后的真实样式（比如外部CSS影响后的结果），用window.getComputedStyle()：

const table = document.querySelector('table');
const computedStyle = window.getComputedStyle(table);
// 比如获取表格的实际边框宽度和颜色
const borderWidth = computedStyle.borderWidth;
const borderColor = computedStyle.borderColor;
console.log('计算后边框宽度:', borderWidth);
console.log('计算后边框颜色:', borderColor);

2. 统计黑色方块的数量 #

你说用getElementsByTagName()没成功，大概率是执行时机不对——如果在表格生成前就调用统计函数，DOM里还没有按钮元素，自然拿不到结果。另外要注意准确判断按钮的背景色，这里给你两种可行的方案：

方案一：DOM生成后遍历统计 #

确保表格生成完成后再遍历按钮，比如放在页面加载完成事件里：

// 保留你的生成函数
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>"); 
}

// 先生成表格
generateTable();

// 统计函数
function countBlackSquares() {
    // 获取所有按钮元素
    const buttons = document.getElementsByTagName('button');
    let count = 0;
    // 遍历按钮集合（HTMLCollection是类数组，可用for...of循环）
    for (const btn of buttons) {
        // 判断内联样式的背景色是否为黑色
        if (btn.style.backgroundColor === 'black') {
            count++;
        }
    }
    console.log('黑色方块总数:', count); // 这里会输出16（9x9表格里，偶数行偶数列共4*4=16个）
    return count;
}

// 页面加载完成后调用统计，确保元素都已生成
window.addEventListener('load', countBlackSquares);

方案二：生成时直接计数（更高效） #

如果不需要事后统计，也可以在生成表格的过程中直接累加数量，不用再遍历DOM：

function generateTable(range) { 
    let blackSquareCount = 0;
    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>"); 
                blackSquareCount++; // 每生成一个黑色按钮就+1
            } 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('黑色方块总数:', blackSquareCount);
    return blackSquareCount;
}

// 调用生成函数时直接拿到计数
const count = generateTable();

为啥你之前用getElementsByTagName()没成功？ #

大概率是你在generateTable()还没执行的时候就调用了统计函数，这时候DOM里根本没有按钮元素，所以拿到的是一个空的HTMLCollection。只要确保统计函数在表格生成之后执行（比如放在window.load里，或者在generateTable()调用之后），就能正常拿到元素了。

内容的提问来源于stack exchange，提问作者NITISH