html에서의 각 글자 색 변경 (feat.js)

html파일의

<h1>
	<span>A</span>
    <span>B</span>
    <span>C</span>    


</h1>

으로 짜여진 코드에 각 A B C에 다른 색깔을 부여하고싶다.

 

const colors = ['red', 'orange', 'blue']

 

colors 배열에 있는 색깔을 순서대로 부여하고싶다.

const spans = document.querySelectorAll('h1 span');


let i = 0;

for(const span of spans){
    span.style.color=colors[i]
    i++
}

 

 

모든 span에 접근하는 spans 변수를 만들고 colors 배열에 접근하여 각 요소를 하나씩 span에 부여