javascript（动态）表单的css字体和背景样式

我希望能在造型方面得到一些帮助。我在网上随机发现了这个tic-tac-toe小提琴：

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

第一次点击一个方块产生“x”，然后计算机在另一个方块中放置“o”来播放

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

是否可以仅使用css来执行此操作

如果不是纯css，那么在JS中哪里可以这样做

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

感谢您的帮助。

使用Javascript时没有“样式”问题。代码需要模块化，以满足您的需求。 这里有一个例子

功能位置（值、颜色）{
var div=document.getElementById（“placer”）；
div.innerHTML=值；
div.style=“背景色：”+颜色；
}

#放置器{
宽度：40px；
高度：40px；
边框：3倍纯黑；
字体：20px Verdana；
字号：900；
}

X
O


结果：

以下是您试图实现的JavaScript解决方案：

哈克的解决方案，但我所做的是修改表单元素。每当用户单击表单时，它将循环遍历所有元素，如果它是tictac正方形，它将检查元素值。并根据广场内部的价值进行设计

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

Element.style.color=“red”和&Element.style.backgroundColor=“red”谢谢！我真的很感激修改后的链接，这样我可以做一个密切的比较，了解更多。你的小提琴演奏得很好，谢谢你。这肯定比最初的代码更优雅！