[JavaScript]/[JavaScript] 공부 기록

[JS 공부] WEB2-JS - 12강_제어할 태그 선택, 선택자_230417(월)

노트포미 2023. 4. 17. 18:44

https://youtube.com/playlist?list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf  

 

WEB2-JavaScript

 

www.youtube.com

[12강] 제어할 태그 선택하기

- 버튼을 눌렀을 때, CSS의 style 변경하는 방법

1. CSS의 선택자 불러오기

document.querySelector('선택자');

   - 태그 선택자 : '선택자이름'
     클래스 선택자 : '.선택자이름'
     아이디 선택자 : '#선택자이름'

 

2. Style 변경하기

document.querySelector('선택자').style.backgroundColor='black';

   - .style.color는 글자 색상 변경

 

[실습] night버튼을 누르면, 블랙모드 / day버튼을 누르면 화이트모드 로 작동하는 사이트

<body>
    <input type="button" value="night" onclick="
        document.querySelector('body').style.backgroundColor='black';
        document.querySelector('body').style.color='white';
    ">
    <input type="button" value="day" onclick="
        document.querySelector('body').style.backgroundColor='white';
        document.querySelector('body').style.color='black';
    ">
    <h1>JavaScript</h1>
</body>

<결과 > (버튼 누르면 변경됨)