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