이재호

querySelectorAll 을 사용해 무지개 글자를 만들어 보자 🌈 본문

프론트엔드/자바스크립트

querySelectorAll 을 사용해 무지개 글자를 만들어 보자 🌈

호재이 2023. 2. 13. 01:13

위 사진과 같이 글자를 돌면서 글자색을 무지개색으로 만드는 작업을 하고 싶다

Index.html

<!DOCTYPE html>

<head>
    <title>Rainbow</title>
    <!--LEAVE THESE LINES ALONE, PLEASE! THEY MAKE THE LIVE PREVIEW WORK!-->
    <script src="node_modules/babel-polyfill/dist/polyfill.js" type="text/javascript"> </script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

</head>

<body>
    <!--DON'T TOUCH THIS FILE PLEASE!-->
    <h1>
        <span>R</span>
        <span>A</span>
        <span>I</span>
        <span>N</span>
        <span>B</span>
        <span>O</span>
        <span>W</span>
    </h1>
</body>
</html>

DOM을 이용해서 브라우저 화면에 글자색을 화려하게 바꿔보자

app.js

1. 숫자색을 나타내는 배열이 있다 
const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];

2. span태그 안에 있는 모든 요소를 선택해야하므로 document.querySelectorAll()메서드를 사용해서 변수에 담아보자

const RainbowFonts = document.querySelectorAll('span')

3. querySelectorAll 메서드는 배열은 아니지만 반복을 하며 돌수 있는 for of문을 사용할수 있다

for(let RainbowFont of RainbowFonts){

    RainbowFont.style.color
}

4. 반복을 돌며 인덱스가 증가해야하므로 카운팅을 해줄 변수를 for of 문 밖에 선언해준다

let color = 0;
for(let RainbowFont of RainbowFonts){
    RainbowFont.style.color
}

5. 기본값을 0으로 설정한 다음 colors[color] 하면 0,1,2,3 순으로 증가가 된다, 반복해서 증가를 시켜주는 color ++ 도 추가해준다

let color = 0;
for(let RainbowFont of RainbowFonts){
    RainbowFont.style.color = colors[color]
	color++
}


결과값 RainbowFont.style.color = "red" , RainbowFont.style.color = "orange" ...  RainbowFont.style.color =  "violet"

'프론트엔드 > 자바스크립트' 카테고리의 다른 글

Dom을 이용해서 포켓몬 도감 만들기  (0) 2023.02.13
브라우저에서 버튼 100개 만들어보기 ☑️  (0) 2023.02.13
구조분해할당(Destructor)란?  (0) 2023.02.10
스프레드 문법 / 전개구문  (0) 2023.02.10
화살표 함수에서 this  (0) 2023.02.09
'프론트엔드/자바스크립트' Related Articles more