버튼만들기를 직접 해보도록 한다.
<input type="button" value="day" onclick="">onclick부분에서 body태그를 선택하게 하고 싶은데 어떻게 할까...
구글에 javascript select tag by css selector라고 검색해보자.
document.querySelector(".myclass")
document: 이 문서에서query: 웹브라우저에게 질의Selector: css의 셀렉터(".myclass"): 선택할 클래스
이를 바탕으로 코드를 써본다.
document.querySelector('body')body태그의 style이라는 속성을 js로 어떻게 넣을까...
구글에 javascript element style 이라고 검색해보자.
document.querySelector('body').style
.style을 추가하면 된다.
body 태그의 style을 background-color:balck으로 지정하고 싶다.
구글에 javascript style background color라고 검색해보자.
<input type="button" value="night" onclick="document.querySelector('body').style.backgroundColor='black';>
.style뒤에backgroundColor="";을 추가하면 된다.
변경사항을 수정하고 웹페이지에 들어가 Elements 항목을 보자. night버튼을 눌렀을 때 <body style="background-color:black">으로 바뀌면서 동시에 백그라운드 컬러가 검은색으로 변경되는 것을 볼 수 있다.
텍스트 색을 하얗게 바꾸려면?
document.querySelector('body').style.color='white';결과
<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';
">CSS를 동적으로 변경하여 사용자와 상호작용할 수 있는 주간모드와 야간모드를 만들 수 있는 능력을 갖추게 되었다!
일단 뭐라도 해보는 중