如何在javascript中更改类的颜色[关闭]

Question

我对这段代码有疑问，我用getElementById 做了所有事情，它对我有用。但同样的代码不适用于

 document.getElementsByClassName("hearts");

我的 HTML 代码是

status = 1;

function changeStyle() {
  //Note the lowercase first letter.
  x = document.getElementsByClassName("hearts");

  if (status == 1) {
    x.style.color = 'white';
    status = 2;
  } else if (status == 2) {
    x.style.color = 'red';
    status = 1;
  }
}

<a onclick="javascript:changeStyle();" style="color:red;" class="hearts"> my code </a>

Answer 1

getElementsByClassName() 方法以NodeList 对象的形式返回文档中具有指定类名的所有元素的集合。

NodeList 对象表示节点的集合。可以通过索引号访问节点。索引从 0 开始。

试试这个：

<script>
    status = 1;
function changeStyle() {
    alert(1);
//Note the lowercase first letter.
x = document.getElementsByClassName("hearts")[0];

if(status==1) {
    x.style.color = 'green';
    status = 2;
}
else if(status==2) {
    x.style.color = 'red';
    status = 1;
}
}
</script>

JSFiddle