更改伪类:在javaScript的CSS之前，用于TD

Question

我有一个TD的CSS类，如下：

td {
    text-align: left;
    padding: 3px;
    color:white;
    background-color:#E3F2ED ;
    position:relative; 
    z-index:10; 
    border:1px solid #74827D;
    border-style:solid none;
}
 td:before{
    content:""; 
    position:absolute; 
    z-index:-1; 
    top:2px; 
    left:2px; 
    right:2px; 
    bottom:2px; 
    background:#20936C;
} 

这使各个单元具有颜色#20936C和颜色的边界#E3F2ED和颜色的最后一个边界#74827D。

现在，我想在单击一个单元格时更改它的颜色。因此，基本上我只想更改 :before 颜色以便说是红色。

Answer 1

我认为您可以使用JS将"clicked"类添加或删除到这些元素中，然后为该类添加一些CSS：

 td.clicked:before{
    background:#FF0000;
 }

cascading CSS的性质意味着将应用td:before选择器的主要样式，然后td.clicked:before样式将覆盖background。

这样的东西：

document.querySelector("table").addEventListener("click", function(e) {
  if (e.target.nodeName === "TD")
    e.target.classList.toggle("clicked")
})

td {
    text-align: left;
    padding: 3px;
    color:white;
    background-color:#E3F2ED ;
    position:relative; 
    z-index:10; 
    border:1px solid #74827D;
    border-style:solid none;
}
 td:before{
    content:""; 
    position:absolute; 
    z-index:-1; 
    top:2px; 
    left:2px; 
    right:2px; 
    bottom:2px; 
    background:#20936C;
 }
 
 td.clicked:before{
    background:#FF0000;
 }

<table>
  <tr><td>Click me</td></tr>
  <tr><td>Or me</td></tr>
</table>

Answer 2

想法是添加CSS

td.active:before {
  background: red;
}

单击时，将类活动添加到TD

中

$(function() {
   $('td').on('click', function() {
       $(this).toggleClass('active')
   });
});

td {
  text-align: left;
  padding: 3px;
  color: white;
  background-color: #E3F2ED;
  position: relative;
  z-index: 10;
  border: 1px solid #74827D;
  border-style: solid none;
}
td:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  background: #20936C;
}
td.active:before {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>This is an example</td>
    <td>This is an example</td>
  </tr>
</table>

Answer 3

以下答案与其他答案一样，将"选定"类切换为"选择"类，但是我认为最好使用事件委托并将侦听器放在表格上而不是每个单元格。另外，该解决方案使用普通JS，无需其他库。

而不是使用标签名称，您可以在可选的元素中添加"可选"类，并在此上过滤，因此它不仅限于特定的标签名称。

如果您需要支持不支持 classList 属性的浏览器，那并不困难。有很多类添加/删除/切换实用程序可用。

window.onload = function(){
   document.getElementById('table0').addEventListener('click', toggleCell, false);
}
function toggleCell(e) {
  // Get the element that was clicked on
  var tgt = e.target;
  // If it was a TD, toggle the "selected" class
  if (tgt.tagName.toLowerCase() == 'td') {
    tgt.classList.toggle('selected');
  }
}

.selected { background-color: red; }
td { padding: 10px;}

<table id="table0">
  <tr><td>a<td>b<td>c
  <tr><td>a<td>b<td>c
  <tr><td>a<td>b<td>c
</table>