왼쪽부터 기본- 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 |