Question

我希望得到一些关于造型的帮助。我在网上随机发现了这个井字游戏小提琴：

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

这不是不是我的小提琴，但是当涉及JS时，它说明了我的动态样式问题。

首先点击一个正方形会产生＆＃34; x＆＃34;然后计算机通过放置＆＃34; o＆＃34;在另一个广场。

我的问题 ：每次点击后如何设置方块的样式。例如，任何＆＃34; x＆＃34;方块变成蓝色，任何＆＃34; o＆＃34;方块变红了。

是否可以仅使用css执行此操作？
如果不是纯粹的CSS，JS在哪里做到这一点？

感谢您的帮助。

Answer 1

使用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>

Answer 2

以下是您尝试实现的JavaScript解决方案： Modified fiddle of the link you provided

Hacky解决方案，但我所做的是修改表单元素。每当用户点击表单时，它将循环遍历所有元素，如果它是tictac square，它将检查元素值。并根据广场内的价值风格。

主要的是，您可以通过以下方式使用JavaScript设置元素：

someElement.style.background =＆＃39; colorString＆＃39;;

<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
      }
    }
  }
'>

用于javascript（动态）表单的CSS字体和背景样式

2 个答案: