[Javascript] querySelector() 를 활용하여 CSS 속성 변경하기

 

01. querySelector() method

 

querySelector() 메소드를 활용하면 특정 CSS Selector를 연결시켜 각 element 의 속성들을 동적으로 변경할 수 있다.

 

각 Selector의 리턴 예시

• tag > document.querySelector("example");
• class > document.querySelector(".example");
• id > document.querySelector("#example");
• 특정 class 를 포함하고 있는 첫 번째 <p> tag > document.querySelector("p.example");
• <div> parent tag 로 감싸고 있는 첫 번째 <p> tag > document.querySelector("div > p");
• target 속성을 가지고 있는 첫 번째 <a> tag > document.querySelector("a[target]");

※ querySelector() 메소드는 특정 Selector와 연결되어 있는 첫 번째 element만 지정하므로, 해당 selector를 모두 지정하고 싶은 경우 querySelectorAll() 메소드를 이용한다.

※ 여러 selector를 지정하고 싶은 경우 콤마(,)를 사용하여 각 selector를 분리시켜 주면 되나 반환되는 건 document에서 먼저 작성된 selector이다.

 

02. querySelector() method 를 활용하여 CSS 동적 변경

 

HTML 에 이벤트가 발생했을 때에 한하여 코드를 변경해주는 방법이다.

 

HTML에서 발생하는 이벤트 예시

• 버튼 또는 링크를 클릭했을 때
• 페이지가 로드되었을 때
• Input 안의 영역이 변경되었을 때

 

CSS 속성 변경 문법

documnet.querySelector('Selector').style.변경할 attribute = '변경 내용';

/* CSS attribute에 - 가 들어가는 경우 - 를 지운 후 - 뒤에 있던 알파벳을 대문자로 써줌 */

코드 예시

            <div class="colorbtn">
				/* night 버튼을 클릭하면 body의 전체 배경색이 black으로 변경됨 */
                <input type="button" value="night" onclick="
                document.querySelector('body').style.backgroundColor = 'black';
                ">  
				/* day 버튼을 클릭하면 body의 전체 배경색이 white로 변경됨 */
                <input type="button" value="day" onclick="
                document.querySelector('body').style.backgroundColor = 'white';
                ">  
            </div>

페이지 구현 화면

처음 화면

night 버튼을 클릭했을 때의 화면 - backgroungColor = 'black';

day 버튼을 클릭했을 때의 화면 - backgroungColor = 'white';