按类名更改div的style.width

时间:2014-02-26 22:35:21

标签: javascript

我一直在尝试使用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个动画条,我更喜欢使用类名来使它更干净。

提前致谢。

1 个答案:

答案 0 :(得分:3)

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