CSS [attribute = value]選擇器未應用

Question

我有一個div 。 我希望它在單擊時能在紅色和綠色之間改變顏色。

我在JS中編寫了兩個工作函數來完成此任務。
一種叫做works只是改變顏色。
一種叫做doesntWork屬性clicked ，它依靠CSS來改變顏色，這種情況不會發生。 為什么？ 我該如何解決呢？

 function doesntWork(div) { div.clicked = !div.clicked console.log(div.clicked) } function works(div) { // console.log(div.style['background-color']) if(div.style['background-color'] === "red"){ div.style['background-color'] = "green" } else { div.style['background-color'] = "red" } } 

 div { background: green; width: 100px; height: 100px; margin: 20px; display: inline-block; border-radius: 1em; } div[clicked="true"] { background: red; } 

 <div onclick="works(this)"></div> <div onclick="doesntWork(this)"></div> 

Answer 1

您不是在設置clicked 屬性，而是在設置屬性 。 下面的代碼演示了如何正確使用setAttribute和getAttribute 。 另外，對於自定義屬性，您應該使用data-前綴。

您需要使用三元條件，而不是簡單地否定它：第一次單擊時，該屬性為null 。 否定它會產生true ，然后將其設置為屬性並轉換為字符串'true' 。 再次否定此參數將使其為false → 'false' 。 不是因為它是'true' ，而是因為它是一個非空字符串 ！ 再次單擊將使屬性值保持為'false' 。

另外，由於該屬性在第一次時既不是'true'也不是'false' ，因此這是在檢查它是否不是 'true' 。

 function doesntWork(div) { div.setAttribute('data-clicked',div.getAttribute('data-clicked')!='true'?'true':'false'); console.log(div.getAttribute('data-clicked')); } function works(div) { // console.log(div.style['background-color']) if(div.style['background-color'] === "red"){ div.style['background-color'] = "green"; } else { div.style['background-color'] = "red"; } } 

 div { background: green; width: 100px; height: 100px; margin: 20px; display: inline-block; border-radius: 1em; } div[data-clicked="true"] { background: red; } 

 <div onclick="works(this)"></div> <div onclick="doesntWork(this)"></div> 

Answer 2

此功能無效，因為div 規范中沒有clicked屬性。 您只能將此類選擇器用於屬性，而不能創建自己的選擇器。