CSSを使用して、JSで生成されたクラス名を持つ要素のスタイルを設定するにはどうすればよいですか？

Question

私は現在、長時間実行している私のペットプロジェクト（Java Chessアプリケーション）をHTML/CSS/JSを使用してWebに移植しようとしていますが、Web開発にあまり経験はありません。 私がしたいのは、私の板の四角（要素）のクラス名を使って、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

あなたはJavaScriptでそれから参照する際に奇妙な名前を持っているいくつかのCSSプロパティがあります。 classがその1つです。 （forはlabelForになる、他のです。）

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

ヒストリカルノート：アンダーES3あなたはプロパティ名として予約語を使用することはできませんとclassは予約語です。これはES5では重要ではありませんが、このコンベンションはすでにかなりの石に設定されています。

参考：ジェレミー・J Starcherで答えたようhttps://developer.mozilla.org/en-US/docs/Web/API/Element/className

Answer 2

JavaScriptを使用して生成された要素にクラスを追加するclassNameを使用することができます。

ただし、classListプロパティでも、要素にアタッチされたクラスのリストを返すことができます。

これは2つの有用なメソッドを持っています。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