나만의 개발노트

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

[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>

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

 

'[JavaScript] > [JavaScript] 공부 기록' 카테고리의 다른 글

[JS 공부] WEB2 JS - 16~18강_조건문,리팩토링 중복제거(this, var변수)_230419(수)  (0) 2023.04.19
[JS 공부] WEB2 JS - 15강_비교 연산자와 불리언_230417(월)  (0) 2023.04.18
[JS 공부] Deep Dive책 - 8장_제어문_230322(수)  (0) 2023.04.17
[JS 공부] WEB2 JS - 1~6강_HTML과JS의 관계, 데이터 타입_230405(수)  (0) 2023.04.05
[JS 공부] Deep Dive책 - 7장_연산자_230322(수)  (0) 2023.03.22
'[JavaScript]/[JavaScript] 공부 기록' Related Articles more