querySelector()
2023. 1. 11. 12:08
어떤 이벤트가 일어났을 때, 페이지의 스타일을 바꾸는 기능을 구현하고 싶다.
기능 구현을 위해서는 이벤트가 일어났을 때 어떤 태그에 스타일이 지정될지 선택하는 작업이 필요하다.
querySelector()를 사용하면 css 선택자를 이용해서 원하는 태그를 선택할 수 있다.
document.querySelcetor("body")
querySelector에 관한 자세한 내용은 아래 링크에서 확인하자.
https://developer.mozilla.org/ko/docs/Web/API/Document/querySelector
Document.querySelector() - Web API | MDN
**Document.querySelector()**는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다.
developer.mozilla.org
querySelector()를 사용해서 원하는 태그를 선택했다면 그 태그의 스타일을 적용할 수 있다.
document.querySelector("body").style.backgroundColor = "black";
동작을 확인하기 위해
버튼 night, day 두개를 만들자.
night 버튼은 누르게 되면 배경이 검정색이 되고 글자 색은 하얀색이 된다.
day 버튼은 누르게 되면 배경이 하얀색이 되고 글자 색이 검정색이 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>queryselector</title>
</head>
<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';
">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis velit autem vero recusandae dicta omnis ullam alias? Veritatis reiciendis, repellendus modi, dignissimos eveniet nisi, pariatur voluptas est nostrum sed itaque.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis velit autem vero recusandae dicta omnis ullam alias? Veritatis reiciendis, repellendus modi, dignissimos eveniet nisi, pariatur voluptas est nostrum sed itaque.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis velit autem vero recusandae dicta omnis ullam alias? Veritatis reiciendis, repellendus modi, dignissimos eveniet nisi, pariatur voluptas est nostrum sed itaque.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis velit autem vero recusandae dicta omnis ullam alias? Veritatis reiciendis, repellendus modi, dignissimos eveniet nisi, pariatur voluptas est nostrum sed itaque.
</p>
</body>
</html>
부스트코스의 강의 내용을 정리한 포스트입니다.
https://www.boostcourse.org/cs124
자바스크립트의 시작
부스트코스 무료 강의
www.boostcourse.org
'공부 > JavaScript' 카테고리의 다른 글
| 함수 (0) | 2023.01.26 |
|---|---|
| 반복문 (0) | 2023.01.12 |
| this와 리팩토링 (0) | 2023.01.12 |
| 조건문 (0) | 2023.01.12 |
| HTML에서 JavaScript 사용하기 (0) | 2023.01.10 |
