JavaScript 7일차 - 제어할 태그 선택하기

제어할 태그 선택하기

 

html의 body를 선택해서 제어하고싶다.

javascript select tag by css selector 구글링하기

https://developer.mozilla.org/ko/docs/Web/API/Document/querySelectorAll

Document.querySelectorAll() - Web API | MDN

예문에는 document.querySelector("body") 셀렉터 뒤에 괄호안에 쌍따옴표를 쓰는것으로 나오는데

강의에서는 'body'라고 입력하게 한다. 둘다 되는지 확인해보자!

쌍따옴표로 하니까 먹통이되었다.

변수 이외에는 다 ' '로 불러오는 것 같다.

일단 querySelector를 쓸 때 body를 불러오고 싶으면 ' 만 된다 라는것만 기억하고 넘어가자

 

js로 특정 요소에 스타일을 넣고싶다

javascript element style 구글링하기

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style

HTMLElement.style - Web APIs | MDN

 

js로 백그라운드 컬러를 설정하고싶다

javascript background color 구글링하기

https://www.w3schools.com/jsref/prop_style_backgroundcolor.asp

HTML DOM Style backgroundColor Property

 

 night 버튼 누르기 전 html

night 버튼 누른 후 html

 

document.querySelector('body').style.color = 'white'; 추가

스타일에 글씨 컬러까지 들어간 것이 확인된다!

 

혼자 day 버튼 js도 짜보자

<input type = "button" value = "day" onclick="
   document.querySelector('body').style.backgroundColor = 'white';
   document.querySelector('body').style.color = 'black';
  ">

 

직접 태그에 씌우는 css스타일하고 js를 이용한 바디 스타일주기하고 우선순위가 궁금해져서 실험을 해봤다.

html에 직접 입력하는 스타일이 우선순위였다! 고용보험 글씨의 빨간색은 night/day 전부 빨간색 유지된다.