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

【问题标题】：Toggle text color of all div elements切换所有 div 元素的文本颜色
【发布时间】：2015-10-25 18:56:45
【问题描述】：

有没有办法在 checkobx 被选中时将所有文本颜色更改为黑色，并在未选中时恢复其原始颜色？

我尝试了使用切换，但不确定如何保留原始颜色。当前代码如下，这里是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;
}

【问题讨论】：

标签： javascript jquery html css

【解决方案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

【讨论】：

谢谢，我知道一定有办法做到这一点！

【解决方案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";
    }
}

祝你好运！

【讨论】：

感谢您的帮助。如果再次选中该框，我希望能够保留原始文本颜色。