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

css font and background styling for a javascript (dynamic) form

本文关键字：字体 背景 样式 CSS 动态 表单 javascript      更新时间：2023-09-26

我希望在造型方面得到一些帮助。我在网上随机发现了这个井字琴:

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

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

第一次点击一个正方形产生"x"，然后计算机通过在另一个正方形中放置"o"来播放。

我的问题:每次点击后如何样式正方形。例如，任何"x"方块变成蓝色，任何"o"方块变成红色。

  1. 是可能做到这一点与css只有吗?
  2. 如果不是纯css，在JS中哪里做这个?

PS:我是一个业余爱好者，慢慢地自学。Stackoverflow非常有帮助，通常阅读以前的问题/答案就足够了。虽然我见过大致类似的问题，但我没有找到这个确切的问题。

谢谢你的帮助。

这是一个JavaScript解决方案，你正在努力实现:修改了您提供的链接

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

最重要的是，你可以用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
      }
    }
  }
'>

使用Javascript时没有"Style"问题。代码只需要足够模块化就可以满足您的需求。下面是一个例子

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>

相关文章：