javascript - javascript(动态)表单的CSS字体和背景样式

Question

我希望在我头脑中的造型方面得到一些帮助。我在网上随机发现了这个井字游戏:

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

这不是我的 fiddle ，但它说明了我在涉及 JS 时的动态样式问题。

第一次点击一个方 block 会生成“x”，然后计算机通过将“o”放在另一个方 block 中来播放。

我的问题:如何在每次点击后设置方 block 的样式。例如，任何“x”方 block 变为蓝色，任何“o”方 block 变为红色。

1. 是否可以只使用 css 来做到这一点？
2. 如果不是纯 css，那么在 JS 的哪个位置可以做到这一点？

PS:业余爱好者，自己慢慢学习。 Stackoverflow 非常有用，通常阅读以前的问题/答案就足够了。虽然我看到了大致相似的问题，但我找不到这个确切的问题。

感谢您的帮助。

Answer 1

这是您要实现的目标的 JavaScript 解决方案: Modified fiddle of the link you provided

Hacky 解决方案，但我所做的是修改表单元素。每当用户单击表单时，它都会遍历所有元素，如果它是井字形正方形，它会检查元素值。并根据正方形内部的值设置样式。

最重要的是，您可以通过以下方式使用 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
      }
    }
  }
'>