Question

检查复选框时是否有办法将所有文字颜色更改为黑色，并在取消选中时将其恢复为原始颜色？

我尝试使用切换但不确定如何保留原始颜色。目前的代码如下，这里是fiddle。

感谢您的帮助。

<div class="ws-css-table">
    <div class="ws-css-table-tr">
        <div class="ws-css-table-td">A</div>
        <div class="ws-css-table-td">B</div>
    </div>
    <div class="ws-css-table-tr">
        <div class="ws-css-table-td">C</div>
        <div class="ws-css-table-td">D</div>
    </div>
    <div class="ws-css-table-tr">
        <div class="ws-css-table-td">E</div>
        <div class="ws-css-table-td">F</div>
    </div>
</div>

    </br>
<input type="checkbox" id="blacktext">Black Text

jquery的

 var colors = ['red', 'blue', 'purple', 'green'];

$(document).ready(function () {
  $('.ws-css-table-td').each(function ()
 {      
  var theColor = colors[Math.floor(Math.random() * colors.length)];
    $(this).css('color', theColor);
});
    });

的CSS：

.ws-css-table {
    display: table;
}
.ws-css-table-tr {
    display: table-row;
}
.ws-css-table-td {
    display: table-cell;
    border:1px solid #000;
    width: 15px;
    height:15px;
    text-align:center;
    vertical-align:middle;
}

Answer 1

 var colors = ['red', 'blue', 'purple', 'green'];

 $(document).ready(function() {
   $('.ws-css-table-td').each(function() {
     var theColor = colors[Math.floor(Math.random() * colors.length)];
     $(this).css('color', theColor);
   });
 });


 $('#blacktext').click(function() {

   $('.ws-css-table-td').toggleClass('blackcolor');

 })

.ws-css-table {
  display: table;
}
.ws-css-table-tr {
  display: table-row;
}
.ws-css-table-td {
  display: table-cell;
  border: 1px solid #000;
  width: 15px;
  height: 15px;
  text-align: center;
  vertical-align: middle;
}
.blackcolor {
  color: #000!important
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ws-css-table">
  <div class="ws-css-table-tr">
    <div class="ws-css-table-td">A</div>
    <div class="ws-css-table-td">B</div>
  </div>
  <div class="ws-css-table-tr">
    <div class="ws-css-table-td">C</div>
    <div class="ws-css-table-td">D</div>
  </div>
  <div class="ws-css-table-tr">
    <div class="ws-css-table-td">E</div>
    <div class="ws-css-table-td">F</div>
  </div>
</div>

</br>
<input type="checkbox" id="blacktext">Black Text

Answer 2

您可以使用onclick执行此操作，添加到复选框：

onclick="makeBlack"

现在我们将在javascript中创建一个名为makeBlack的函数：

function makeBlack() {  
    var x = document.getElementsByClassName("ws-css-table-td");
    var i;

    for (i = 0; i < x.length; i++) {
        x[i].style.color = "black";
    }
}

古德勒克！

切换所有div元素的文本颜色

2 个答案: