CSS [attribute = value]选择器未应用

Question

I have a div . I want it to change color between red and green when clicked.

I wrote two working functions in JS to accomplish this.
One called works just changes the color.
One called doesntWork negates attribute clicked , and depends on CSS to change the color, which doesn't happen. Why? And how can I fix this?

 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

You're not setting an attribute clicked but a property . The code below demonstrates how to use setAttribute and getAttribute correctly. Also, for custom properties you should use the data- prefix.

You need to use the ternary condition, instead of simply negating it: on the first click, the attribute is null . Negating it yields true , which is then set as an attribute and converted to a string 'true' . Negating this a second time will make it false → 'false' . Not because it was 'true' , but because it was a non-empty string ! Any further click will keep the attribute value at 'false' .

Also, because the attribute is neither 'true' nor 'false' at the first time, this is checking whether it's not '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

This function don't work, because there aren't clicked attribute in div specifications . This type of selector you can use just for attributes, you can't create your own.