style
night라는 버튼을 누르면 body background가 검정색으로 변경되고
day 라는 버튼을 누르면 body background가 하얀색으로 변경된다.
<body background color . . .> 이런 식으로 추가하면 되지만
JavaScript를 사용해서 이벤트를 생성해보도록 하자.
<input type="button" value="night" onclick="
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
">
[!] 대소문자 주의
input 태그로 button 을 만들어주고, 이름은 night로 설정해준다.
onclick 버튼 클릭 시 querySelector 는 body에 style의 backgroundcolor 부분을 black 으로 변경한다.
'body' 부분은 변경 될 수 있다. 예를들어 <body id = target> 을 사용했다면
'body' 부분에 #target 이 들어가면 된다.
위 예제는 night 버튼과 day 버튼으로 배경색과 글씨색을 정하였다.
하지만 한 개의 버튼으로 night와 day 버튼을 눌렀을 때의 효과가 나오게 하는 것을 토글이라고 한다.(조건문)
비교연산자
document.write(1===1); // true
document.write(1===2); // false
<h3>1<2</h3> // 1<2 를 표시 할 때 < 만 사용하게되면 HTML 에서 사용하는 꺽새이기 때문에 이럴 땐
<h3>1<2</h3> 라고 해줘야 <가 표시된다.
'Web > JavaScript' 카테고리의 다른 글
| [javascript] 기본 (0) | 2019.01.31 |
|---|
댓글