반응형
구글에서 자바스크립트 태그 선택할 때 검색 tip
Javascript select tag by css selector
Element = document.querySelector(selectors);
예시) var el = document.querySelector(".myclass");
Javascript element style
Javascript style background color → css 태그와 자바스크립트 태그는 다를 수 있음 (background-color vs backgroundColor)
활용해보자!
<body>
<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';
">
</body>→ night 와 day 라고 되어 있는 버튼이 2개 생성됨
→ night 클릭시 body 부분의 배경이 검정, 폰트가 흰색으로 변경(야간모드)
→ day 클릭시 body 부분의 배경이 흰색, 폰트가 검정으로 변경(주간모드)
※생활코딩 > WEB > WEB2 - JavaScript 강의를 통해 공부한 내용입니다.
반응형
'프로그래밍 언어 & 데이터베이스 > JavaScript' 카테고리의 다른 글
| 비교 연산자와 Boolean 데이터 타입 (0) | 2020.07.11 |
|---|---|
| 프로그램, 프로그래밍, 프로그래머 (0) | 2020.07.11 |
| 변수와 대입 연산(variable vs constant) / 변수를 사용하는 이유 (0) | 2020.05.23 |
| 자바스크립트 데이터 타입(JavaScript Data Type) - 숫자(Number), 문자열(String) (0) | 2020.05.17 |
| JavaScript 기초(2) - 콘솔(console) 사용하기 (0) | 2020.05.17 |
댓글