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 메소드 querySelectorAll() 는 지정된 셀렉터 그룹에 일치하는 다큐먼트의 엘리먼트 리스트를 나타내는 정적(살아 있지 않은) NodeList 를 반환합니다.
developer.mozilla.org
예문에는 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
The style read-only property returns the inline style of an element in the form of a CSSStyleDeclaration object that contains a list of all styles properties for that element with values assigned for the attributes that are defined in the element's inline
developer.mozilla.org
js로 백그라운드 컬러를 설정하고싶다
javascript background color 구글링하기
https://www.w3schools.com/jsref/prop_style_backgroundcolor.asp
HTML DOM Style backgroundColor Property
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
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 전부 빨간색 유지된다.