javascript - 更改伪类 :before css in javascript for 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;
 }

CSS 的级联特性意味着将应用td:before 选择器的主要样式，然后是td.clicked:before样式将覆盖背景。

所以像这样:

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>