javascript - 如何使用 css 为具有 JS 生成的类名的元素设置样式？

Question

我目前正在尝试使用 HTML/CSS/JS 将我的一个长期运行的宠物元素(一个 Java 国际象棋应用程序)移植到网络上，但我在网络开发方面不是很有经验。 我想要做的是使用我的棋盘方 block (元素)的类名来表示它们应该由 css 设置的颜色。 如我的代码片段所示，这些元素都是 JS 生成的，并且我已验证每个方 block 的类名都已正确设置。然而，CSS 似乎并没有正确地改变背景颜色。

感谢任何提示/指针:)

function generateBoardHTML() {
    var chessBoard = document.getElementById('chessBoard');

    for (var row = 0; row < 8; row++) {
        var boardRow = chessBoard.insertRow(row);

        for (var col = 0; col < 8; col++) {
            var boardSquare = boardRow.insertCell(col);

            boardSquare.id = '(' + row + ',' + col + ')';
            boardSquare.class = (row + col) % 2 == 0 ? 'whiteSquare' : 'blackSquare';
            //boardSquare.innerHTML = boardSquare.class;
        }
    }
}

generateBoardHTML();

td {
    border: 1px solid black;
    width: 80px;
    height: 80px;
}

.whiteSquare {
    background-color: white;
}

.blackSquare {
    background-color: black;
}

<table id='chessBoard'>
    <tbody></tbody>
</table>

Answer 1

当您在 JavaScript 中引用 then 时，有几个 CSS 属性的名称很奇怪。 class 就是其中之一。 (for 是另一个，它变成了 labelFor。)

boardSquare.className = (row + col) % 2 == 0 ? 'whiteSquare' : 'blackSquare';

历史记录:在 ES3 下，您不能使用保留字作为属性名称，class 是保留字。虽然这在 ES5 中无关紧要，但该约定已经基本确定。

引用:https://developer.mozilla.org/en-US/docs/Web/API/Element/className