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

我有一个

div

。我希望它在单击时在红色和绿色之间更改颜色

我用JS编写了两个工作函数来实现这一点。
一个名为

的工具可以工作

只需改变颜色即可。
一个名为

doesnetwork

的函数会否定单击的属性

，并依赖CSS来更改颜色，但这不会发生为什么？我如何解决这个问题？


功能不工作网络（div）{
div.clicked=！div.clicked
console.log（div.clicked）
}
功能工程（分区）{
//console.log（div.style['background-color']）
if（div.style['background-color']=“red”）{
div.style['background-color']=“绿色”
}
否则{
div.style['background-color']=“红色”
}             
}
div{
背景：绿色；
宽度：100px；
高度：100px；
利润率：20px；
显示：内联块；
边界半径：1米；
}
div[clicked=“true”]{
背景：红色；
}
此函数不起作用，因为在
div
中没有单击
属性。这种类型的选择器只能用于属性，而不能创建自己的属性。
此功能不起作用，因为在
div
中没有单击
属性。这种类型的选择器只能用于属性，而不能创建自己的选择器。
您没有设置单击的属性
，而是设置属性。下面的代码演示了如何正确使用
setAttribute
和
getAttribute
。此外，对于自定义属性，应使用
数据-
前缀

您需要使用三元条件，而不是简单地对其求反：第一次单击时，属性为
null
。对其求反将产生
true
，然后将其设置为属性并转换为字符串
'true'
。第二次对此进行否定将使其
为false
→ <代码>'false'
。不是因为它是
“true”
，而是因为它是一个非空字符串！任何进一步的单击都将使属性值保持在
'false'

此外，由于属性在第一次时既不是
'true'
也不是
'false'
，因此这是在检查它是否是
'true'


功能不工作网络（div）{
div.setAttribute（'data-clicked'，div.getAttribute（'data-clicked'）！='true'？'true'：'false'）；
log（div.getAttribute（'data-clicked'）；
}
功能工程（分区）{
//console.log（div.style['background-color']）
if（div.style['background-color']=“red”）{
div.style['background-color']=“绿色”；
}
否则{
div.style['background-color']=“红色”；
}             
}
div{
背景：绿色；
宽度：100px；
高度：100px；
利润率：20px；
显示：内联块；
边界半径：1米；
}
div[data clicked=“true”]{
背景：红色；
}

您没有设置单击的属性，而是设置属性。下面的代码演示了如何正确使用
setAttribute
和
getAttribute
。此外，对于自定义属性，应使用
数据-
前缀

您需要使用三元条件，而不是简单地对其求反：第一次单击时，属性为
null
。对其求反将产生
true
，然后将其设置为属性并转换为字符串
'true'
。第二次对此进行否定将使其
为false
→ <代码>'false'
。不是因为它是
“true”
，而是因为它是一个非空字符串！任何进一步的单击都将使属性值保持在
'false'

此外，由于属性在第一次时既不是
'true'
也不是
'false'
，因此这是在检查它是否是
'true'


功能不工作网络（div）{
div.setAttribute（'data-clicked'，div.getAttribute（'data-clicked'）！='true'？'true'：'false'）；
log（div.getAttribute（'data-clicked'）；
}
功能工程（分区）{
//console.log（div.style['background-color']）
if（div.style['background-color']=“red”）{
div.style['background-color']=“绿色”；
}
否则{
div.style['background-color']=“红色”；
}             
}
div{
背景：绿色；
宽度：100px；
高度：100px；
利润率：20px；
显示：内联块；
边界半径：1米；
}
div[data clicked=“true”]{
背景：红色；
}

单击的
在任何地方都不是属性。
单击的
在任何地方都不是属性。“onclick”只是您触发的javascript事件。。。您可以将一个类设置/重置为div以在其上使用css选择器。。。您可以将类设置/重置为div，以便在其上使用css选择器。为什么
div.getAttribute（'data-clicked'）！='true'？'true'：'false'
而不仅仅是
！div.getAttribute（'data-clicked'）
@gingerplus
！div.getAttribute（'clicked'）
每次都会将其设置为
'false'
，因为被否定的非空字符串是
false
。为什么
div.getAttribute（'data-clicked'）！='true'？'true'：'false'
而不仅仅是
！div.getAttribute（'data-clicked'）
@gingerplus
！div.getAttribute（'clicked'）
每次（第一次除外）都会将其设置为
'false'
，因为被否定的非空字符串是
false
。