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

时间:2015-09-05 17:16:53

标签: javascript html css css3 css-selectors

我有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>

2 个答案:

答案 0 :(得分:4)

您没有设置属性 clicked,而是设置属性。以下代码演示了如何正确使用setAttributegetAttribute。此外,对于自定义属性,您应使用data-前缀。

您需要使用三元条件,而不是简单地否定它:在第一次单击时,属性为null。否定它会产生true,然后将其设置为属性并转换为字符串'true'。第二次否定此内容会使其false'false'。不是因为它是'true',而是因为它是非空字符串!任何进一步的点击都会将属性值保持在'false'

另外,由于该属性在第一时间既不是'true'也不是'false',而是检查它是否不是 'true'

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:0)

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