<제어할 태그를 선택하기>
<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';
">→ HTML에서 style 속성을 이용해 CSS의 속성을 태그에 첨가할 수 있었던 것처럼
JavaScript에서도 querySelector 메소드가 CSS 선택자를 사용해 특정 요소를 찾는다(선택한다).
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color='white';→ querySelector 메소드를 통해 body 부분을 찾고, style 속성을 통해 그 body의 backgroundColor는 black,
text color는 white로 설정
ex) document.querySelector('.example'): example이라는 class명을 가진 요소를 찾는다.
document.querySelector('#example'): example이라는 id명을 가진 요소를 찾는다.
< 조건문-if>
→ 조건문 사용하지 않고 버튼을 night ver과 day ver으로 각각 만들어 input 태그를 두 개 작성
→ 조건문을 사용해 버튼을 하나로 통합
- input 태그에 id값 "night_day"로 설정
- if문 사용
- #night_day의 value값이 night와 같으면 backgroundColor=black, text color=white 적용한 후
#night_day의 value값을 day로 변경한다.
- 그렇지 않으면(#night_day의 value값이 day면) backgroundColor=white, text color=black을 적용한 후
#night_day의 value값을 night으로 변경한다.
