Question

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

任何提示/指示赞赏：）

"frameworks": {
    "net461": {
       "buildOptions": {
          "emitEntryPoint": true
       }
    }
}

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

Answer 1

当您在JavaScript中引用时，有几个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

Answer 2

正如Jeremy J Starcher所回答，你可以使用className为使用javascript生成的元素添加一个类。

但您也可以使用classList属性，它返回附加到元素的类列表。

它有两种有用的方法add＆amp; remove元素中的一个类。

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 + ')';
            //Changed here
            boardSquare.classList.add((row + col) % 2 == 0 ? 'whiteSquare' : 'blackSquare');
            //boardSquare.innerHTML = boardSquare.class;
        }
    }
}

generateBoardHTML();

选中此jsFiddle

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

2 个答案: