通过类名更改 div 的 style.width

Question

我一直在尝试使用 set.interval 动画更改 div 的宽度。它与 getELementByID 完美配合，但不适用于 getElementsByClassName。

代码如下：

var loadingBar = 200;

function animationBarOne(){
    document.getElementsByClassName("loading-bar").style.width=(loadingBar+"px");
    loadingBar++;
    if(loadingBar === 900){
         clearInterval(intervalId);
    }
}
var intervalId = setInterval(animationBarOne,1);

我收到“无法设置未定义的属性宽度”。正如我所说，它与 ID 完美配合，但给我大约 10 个动画条，我宁愿使用类名，这样它更干净。

提前致谢。

Answer 1

document.getElementsByClassName()返回一个元素数组。您需要循环遍历数组来修改列表中的每一项：

var loadingBar = 200;

function animationBarOne(){    
    var elements = document.getElementsByClassName("loading-bar");
    for (var i = 0; i < elements.length; i++) {
        elements[i].style.width=(loadingBar+"px");
    }
    loadingBar++;
    if(loadingBar === 900){
         clearInterval(intervalId);
    }
}
var intervalId = setInterval(animationBarOne,1);