뇌 채우기 공간

[Java Script] 버튼으로 웹 페이지 야간 모드, 낮모드 만들기/ 배경색 바꾸기 본문

WEB/Java Script

[Java Script] 버튼으로 웹 페이지 야간 모드, 낮모드 만들기/ 배경색 바꾸기

자바칩 프라푸치노 2020. 12. 29. 10:53

왼쪽부터 기본- night 버튼 눌렀을때 - day 버튼 눌렀을때의 모습입니다.

 

 

<전체코드>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
</head>
<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>hello my page</h1>
   안녕하십니까.
</body>
</html>
 cs

document.querySelector('body')이 부분은 body태그 전체를 선택한다는 뜻입니다.

button을 누르는 이벤트(onclick)이 발생하면 밑에 javascript가 실행됩니다.

 

728x90
저작자표시 비영리 변경금지 (새창열림)

'WEB > Java Script' 카테고리의 다른 글

[Java Script] getter함수 , setter함수  (0) 2021.04.22
[Java Script] 함수의 작성 / 화살표 함수  (0) 2021.04.22
[Java Script] 논리 연산자를 이용한 조건문 평가 / if && || ! / 삼항 연산자/ switch  (0) 2021.04.22
[Java Script] 데이터 타입 / Boolean Null Undefined Number String Symbol  (0) 2021.04.22
[Java Script] 상수/ 변수/ const / let/ var / 변수의 유효 범위/ 블록 스코프/ 함수 스코프/  (0) 2021.04.22
'WEB/Java Script' Related Articles more