Как использовать css для стилирования элемента, который имеет JS-сгенерированное имя класса?

Question

В настоящее время я пытаюсь перенести давно действующий проект моего любимого (Java-шахматное приложение) в Интернет с помощью HTML/CSS/JS, но я не очень разбираюсь в веб-разработке. Что я хочу сделать, это использовать имя класса моих квадратов (элементов), чтобы обозначить, какой цвет должен быть установлен css. Элементы все JS-сгенерированы, как показано в моем фрагменте кода, и я проверил, что имя класса каждого квадрата правильно задано. Однако 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

Есть несколько CSS свойств, которые имеют странные имена, когда вы ссылаетесь, то в JavaScript. 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

Как ответил Джереми J Старчер вы можете использовать className добавить класс к элементу, генерируемой с использованием JavaScript.

Но вы также можете использовать свойство classList, которое возвращает список классов, прикрепленных к элементу.

Он имеет два полезных метода add & 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