div의 스타일을 클래스 이름으로 변경하십시오.

Question

저는 div의 너비를 set.interval 애니메이션으로 변경하려고했습니다. 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);