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

此功能不起作用，因爲沒有在divspecificationsclicked屬性。這種類型的選擇器只能用於屬性，不能創建自己的屬性。