通过按钮切换更改颜色

Question

我有一个代码，应该在单击按钮时在透明和白色之间切换颜色。 This是代码笔链接。

我要更改颜色的div具有类points

<div class="points">100 points</div>

但是运行此javascript代码会返回错误

 document.getElementsByClassName('points').style.color = color;

  

未捕获的TypeError：无法读取未定义的属性'color'

Answer 1

  

getElementsByClassName（）方法返回所有对象的集合   具有指定类名称的文档中的元素，作为NodeList   对象。

使用以下代码实现您想要的-

var elements = document.getElementsByClassName("points");
var i;
for (i = 0; i < elements.length; i++) {
    elements[i].style.color = color;
}

Answer 2

document.getElementsByClassName()返回一个控件数组，并且在您的代码中，没有任何特定的索引位置来设置该特定元素或控件的样式。

修改后的工作代码为：

document.getElementsByClassName('points')[0].style.color = 'red';

console.log(document.getElementsByClassName('points'));

<div class="points">100 points</div>


 

Answer 3

getElementsbyClassName返回具有类点的Elements数组。 这不是一个单一的元素。您需要遍历数组并为每个元素设置颜色。

let arr = document.getElementsByClassName("points");
for(let e of arr){
   e.style.color = "someColor";
}