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'。

＆＃13;

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";
    }             
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

此功能不起作用，因为clicked specifications中没有div属性。这种类型的选择器只能用于属性，您无法创建自己的。

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

2 个答案: