为了账号安全,请及时绑定邮箱和手机立即绑定

如何在JavaScript函数中使用getElementsByClassName?

/ 猿问

如何在JavaScript函数中使用getElementsByClassName?

MMTTMM 2019-11-19 15:24:08

我不知道如何在JavaScript中使用多个ID。单个ID和getElementById没问题,但是一旦我将ID更改为class并尝试使用getElementsByClassName,该函数就会停止工作。我已经读了约100条关于该主题的文章;仍然没有找到答案,所以我希望这里的人知道如何使getElementsByClassName工作。


这是我用于测试的一些简单代码:


function change(){

    document.getElementById('box_one').style.backgroundColor = "blue";

}


function change_boxes(){

    document.getElementsByClassName ('boxes').style.backgroundColor = "green";

}



<input name="" type="button" onClick="change(document.getElementById('box_one')); change_boxes(document.getElementsByClassName('boxes'))" value="Click" />   


<div id="box_one"></div>

<div class="boxes" ></div>

<div class="boxes" ></div>


查看完整描述

3 回答

?
茅侃侃

getElementsByClassName()返回*。您正在尝试直接对结果进行操作;您需要遍历结果。nodeList HTMLCollection


function change_boxes() {

    var boxes = document.getElementsByClassName('boxes'),

        i = boxes.length;


    while(i--) {

        boxes[i].style.backgroundColor = "green";

    }

}


查看完整回答
反对 回复 2019-11-19
?
绝地无双

getElementsByClassName返回具有所有给定类名称的一组元素


var elements = document.getElementsByClassName('boxes');

for(var i=0, l=elements.length; i<l; i++){

 elements[i].style.backgroundColor = "green";

}


查看完整回答
反对 回复 2019-11-19
?
慕雪6442864

getElementsByClassName返回一个元素列表,因此您需要遍历它们并逐项设置每个项目的样式。它在IE中的支持也很有限,因此使用jQuery可能会更好:


$(".boxes").css("backgroundColor", "green");


查看完整回答
反对 回复 2019-11-19

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信