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);

按类名更改div的style.width

1 个答案: