JS / 01 / 기초-12

✅ 요소의 CSS 스타일 다루기

👉 document.요소명.style.속성명

• HTML 요소의 style속성의 값을 접근하거나 변경
  

---

---

✅ 요소의 class 속성값 접근

👉 document.요소명.classList

• HTML 요소의 class 속성값 접근
• DOMTokenList, 유사배열 형태

1) 클래스가 포함 된 div 의 id 값을 가져오기
2) 가져온 id 값을 변수에 할당
3) 가져온 변수(요소).classList => 해당 요소의 class에 접근

[ * ] DOMTokenList 형식으로, 유사배열 형태임 !!

---

✅ class에 속성값을 추가

document.요소명.classList.add()

• HTML 요소의 class 속성값 추가

---

✅ class에 속성값을 삭제

document.요소명.classList.remove()

• HTML 요소의 class 속성값 삭제

---

✅ class에 속성값 존재 확인

document.요소명.classList.contains()

• HTML 요소의 class 속성값 존재하는지 확인후 boolean 값 반환
  (true or false)

---

✅ class에 속성 다루기 - 토글

document.요소명.classList.toggle()

• HTML 요소의 class 속성값 존재하는지 확인후
• 없으면 추가 / 있으면 삭제

---

❗️ class 구분에 콤마가 없는 이유 !?

👉 HTML 태그내에서 class 구분은 공백으로 한다고 합니다 !