2021. 12. 25. 23:41ㆍ코딩공부/JavaScript
제어할 태그 선택하기
html의 body를 선택해서 제어하고싶다.
javascript select tag by css selector 구글링하기
https://developer.mozilla.org/ko/docs/Web/API/Document/querySelectorAll
예문에는 document.querySelector("body") 셀렉터 뒤에 괄호안에 쌍따옴표를 쓰는것으로 나오는데
강의에서는 'body'라고 입력하게 한다. 둘다 되는지 확인해보자!
쌍따옴표로 하니까 먹통이되었다.
변수 이외에는 다 ' '로 불러오는 것 같다.
일단 querySelector를 쓸 때 body를 불러오고 싶으면 ' 만 된다 라는것만 기억하고 넘어가자
js로 특정 요소에 스타일을 넣고싶다
javascript element style 구글링하기
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style
js로 백그라운드 컬러를 설정하고싶다
javascript background color 구글링하기
https://www.w3schools.com/jsref/prop_style_backgroundcolor.asp
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 전부 빨간색 유지된다.
'코딩공부 > JavaScript' 카테고리의 다른 글
Promise와 콜백 패턴의 가장 큰 차이 (0) | 2022.04.13 |
---|---|
JavaScript Closure (0) | 2022.04.13 |
JavaScript 6일차 - CSS 기초 3 (0) | 2021.12.24 |
JavaScript 5일차 - CSS기초 2 (0) | 2021.12.23 |
JavaScript 4일차 - 웹브라우저 제어 / CSS 기초 (0) | 2021.12.22 |