JavaScriptの（ダイナミック）フォームのCSSフォントと背景のスタイリング

Question

私は頭がおかしくなるスタイリングの助けを借りたいと思っていました。私はこの三目並べのフィドルがランダムにオンラインで見つける：

http://fiddle.jshell.net/632617/7L3p4

これはない私のバイオリンですが、JSが含まれているとき、それはダイナミックなスタイリングの私の問題に語っています。

正方形を最初にクリックすると「x」が生成され、別の正方形に「o」を配置するとコンピュータが再生されます。

私の質問：クリックするたびにどのように四角形が表示されますか？例えば、任意の「x」正方形は青色になり、「o」正方形は赤色になる。

1. これはCSSでのみ可能ですか？
2. 純粋なCSSでない場合、JSではこれを行いますか？

PS：私は自分自身でゆっくりと学習しています。 Stackoverflowは非常に役立ち、通常は以前の質問/回答を読むだけで十分です。私はおおよそ同様の質問を見ましたが、私はこの正確な問題を見つけることができませんでした。

ありがとうございました。

Answer 1

であるあなたが達成しようとしているものに、JavaScriptのソリューションです：ハックソリューション Modified fiddle of the link you provided

、しかし、私がやったことは、フォーム要素を変更しました。ユーザーがフォームをクリックするたびに、すべての要素がループされ、テクトククックであれば要素の値がチェックされます。そして正方形の中の値に応じてスタイル。

主なものは、JavaScript次のように要素のスタイルを設定することができます

someElement.style.background = 'colorString';

<FORM NAME="tic" onclick=' 
    for(var i = 0; i < this.children.length; ++i){ 
    if(this.children[i].className === "tictac"){ 
     if(this.children[i].value === " X "){ 
     this.children[i].style.background = "blue"; // new style for X 
     }else if(this.children[i].value === " O "){ 
     this.children[i].style.background = "red"; // new style for O 
     }else{ 
     this.children[i].style.background = "rgb(221,221,221)"; // style for empty square 
     } 
    } 
    } 
'> 

Answer 2

Javascriptを使用すると「スタイル」の問題はありません。このコードは、お客様のニーズを満たすだけのモジュール化されている必要があります。ここ はここで例

function place(value, color){ 
 
    var div = document.getElementById("placer"); 
 
    div.innerHTML = value; 
 
    div.style="background-color:" +color; 
 
}

#placer{ 
 
    width:40px; 
 
    height:40px; 
 
    border: 3px solid black; 
 
    font:20px Verdana ; 
 
    font-weight:900; 
 
}

<button value="X" onclick='place("X","red")' > X</button> 
 
<button value="O" onclick='place("O","blue")'>O</button> 
 
<br/> 
 
Result: <div id="placer"></div>