Question

我这里有一个简单的表格，单击该表格即可切换背景颜色。

下面的代码在单击时来回切换背景颜色。我还需要单击时以相同的方式切换字体颜色（除了背景颜色切换之外）。默认字体颜色为白色，单击时将为黑色，第二次单击时将再次为白色。代码是这样的：

window.onload = function() {

  var all = document.getElementsByTagName("td");
  for (var i = 0; i < all.length; i++) {
    all[i].onclick = inputClickHandler;
  }
};

function inputClickHandler(e) {
  e = e || window.event;
  var tdElm = e.target || e.srcElement;
  if (tdElm.style.backgroundColor == 'rgb(154, 201, 157)') {
    tdElm.style.backgroundColor = '#fff';
  } else {
    tdElm.style.backgroundColor = '#9ac99d';
  }

}

.rep {
  border: 1px solid #CCC;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: whitesmoke;
  border-collapse: collapse;
  width: 10%;
  margin: 10px;
  float: left;
  margin-left: 45px;
}

.rep td {
  padding: 2px;
  margin: 2px;
  border: 1px solid #ccc;
  text-align: center;
  height: 17px;
  width: 17px;
}

<table class="rep">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

Answer 1

JavaScript：

if(variable) {
  element.style.backgroundColor = "firstBGColor";
  element.style.color = "firstFGColor";
} else {
  element.style.backgroundColor = "secondBGColor";
  element.style.color = "secondFGColor";
}
variable = !variable

jQuery： $("body").css("background-color", "blue").css("color", "white")此jQuery代码“同时”更改背景颜色和主体颜色。

首选： 但是我建议创建类和设置并删除它们。它使代码方式更具可维护性。

if(variable) {
  element.className = "firstClass";
} else {
  element.className = "secondClass";
}
variable = !variable

**CSS**
.firstClass {
  background-color: firstBGColor;
  color: firstFGColor
}
.secondClass {
  background-color: secondBGColor;
  color: secondFGColor
}

Answer 2

尝试此代码

$(function(){
  $("td").click(function(){
    if($(this).css('background-color') == 'rgb(154, 201, 157)'){
      $(this).css('background-color', '#fff')
      $(this).css('color', 'white')
    }else{
      $(this).css('background-color', 'rgb(154, 201, 157)')
      $(this).css('color', 'black')
    }
  });
});

.rep {
  border: 1px solid #CCC;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color:whitesmoke;
  border-collapse:collapse; 
  width: 10%;
  margin: 10px; 
  float: left;
  margin-left:45px; 
} 
.rep td {
  padding: 2px;
  margin: 2px;
  border: 1px solid #ccc;
  text-align: center;
  height:17px;
  width:17px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="rep">
<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
</tr>
</table>

同时切换backgroundcolor和fontcolor

2 个答案: