element.style.property
요소의 스타일 속성에 접근해서 값을 변경할 수 있다.
문법
const yellow = document.getElementById("yellow");
yellow.style.backgroundColor = "yellow";id가 yellow인 요소에 배경색을 노란색으로 변경한다.
예제
여러개의 요소를 선택하고 반복문을 사용하여 선택된 요소 전체의 값을 변경하는 방법
여러개의 요소를 선택하고 각각의 요소에 접근하고 싶을땐 배열처럼 사용할 수 있다.
class가 "yellow"인 모든 것들의 style을 변경
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="yellow">노란색</div>
<div class="">안 노란색</div>
<div class="yellow">노란색</div>
<div class="yellow">노란색</div>
<div>노란색아님</div>
</body>
<script>
const yellow = document.getElementsByClassName("yellow");
// 여러개의 정보가 담겨 있을 땐 배열처럼 접근 가능
for(i=0; i<yellow.length; i++){
yellow[i].style.backgroundColor = "yellow";
yellow[i].style.border = "dashed 2px black";
yellow[i].style.width = "300px";
}
</script>
</html>위의 반복문을 아래처럼 변경 가능하다. ( for -> forEach )
Array.from(yellow).forEach((value) => {
value.style.backgroundColor = "yellow";
value.style.border = "dashed 2px black";
value.style.width = "300px";
});배열처럼 사용 가능 하지만 배열은 아니기 때문에 바로 forEach를 사용할 수는 없지만
Array.from(elements).forEach를 사용하면 배열처럼 사용 가능하다.
'웹 > 자바스크립트' 카테고리의 다른 글
| [JavaScript] Node 객체 (0) | 2021.07.12 |
|---|---|
| [JavaScript] 자바스크립트 비교연산 (0) | 2021.07.10 |
| [JavaScript] element.getAttribute / 요소의 속성값에 접근 (0) | 2021.07.09 |
| [JavaScript] element.attribute / HTML요소를 변경하는 방법 (0) | 2021.07.09 |
| [JavaScript] element.innerHTML / HTML요소를 변경하는 방법 (0) | 2021.07.09 |