改變僞類：在JavaScript CSS的TD

之前，我有一個CSS類TD如下：改變僞類：在JavaScript CSS的TD

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顏色讓我們說紅色。

來源

2017-02-24 Prachi Verma

檢查它。 http://stackoverflow.com/questions/10061414/changing-width-property-of-a-before-css-selector-using-jquery – Nick

@Nick，eurgh，他們提出了一個可怕的解決方案..動態插入樣式元素時事情被點擊..這聽起來很精神！ – haxxxton

@haxxxton我想顯示你不能訪問JS中的僞類。 – Nick

想法是添加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>

來源

2017-02-24 01:49:57

我想你可以只使用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>

來源

2017-02-24 01:48:03 nnnnnn

我沒有看到jQuery標籤... – RobG

@RobG - 好點。猜猜我專注於問題的CSS部分，只是想快速添加一個點擊處理程序。我已經更新了使用普通JS的答案。 – nnnnnn

下一個切換「選擇」類作爲其他的答案都有，但我認爲這是更好地使用事件委託，把聽衆放在桌子上，而不是每一個細胞。此外，這個解決方案使用純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>

來源

2017-02-24 02:50:53 RobG

改變僞類：在JavaScript CSS的TD

回答

相關問題