구름 가져오기
Coddy의 움직이는 구름 - HTML/CSS/JS 프로젝트 코스 레슨 — 18개 중 7번째.
JS를 사용하여 DOM 요소를 조작하는 방법에 대해 간단히 복습해 봅시다.
클래스 이름으로 요소를 가져오려면 document.getElementsByClassName을 사용하세요:
const elements = document.getElementsByClassName("someName");위 코드는 클래스 이름이 "someName"인 문서 내의 모든 요소가 담긴 배열을 가져옵니다.
요소의 스타일을 수정하려면 style 속성을 사용하세요:
const elements = document.getElementsByClassName("someName");
const element = elements[0];
element.style.background = "red";위 코드는 클래스 이름이 "someName"인 첫 번째 요소의 배경색을 "red"로 설정합니다.
참고:
elements가 빈 배열인 경우 프로그램이 실패합니다.
챌린지
쉬움JS 파일에서:
- 클래스 이름이
"cloud"인 요소들을 가져옵니다. - 요소들 중 첫 번째 요소(우리의 유일한 구름)를 가져와서 다음을 설정합니다:
top스타일을"0px"보다 큰 값으로left스타일을"0px"보다 큰 값으로
직접 해보기
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Write HTML code here -->
<script src="script.js"></script>
</body>
</html>