[英]changing pseudo class :before css in javascript for TD
我有一个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
颜色更改为红色。
我认为您可以只使用JS向这些元素添加或删除"clicked"
类,然后为该类添加一些CSS:
td.clicked:before{
background:#FF0000;
}
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>
想法是添加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>
下面的代码会像其他答案一样切换“选择的”类,但是我认为最好使用事件委托并将侦听器放在表而不是每个单元格上。 此外,此解决方案使用纯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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.