What?
| JS- Style, Attribute, Class | |||
|---|---|---|---|
| style.backgroundColor | getComputedStyle() | SetProperty | src/alt 등 속성 접근 가능 |
| getAttribute() | setAttribute() | HTMLElement.dataset | Element.classList / add(), remove(), toggle(), contains() |
How?
- getComputedStyle() : 인자로 전달받은 요소의 모든 css속성 값을 담은 객체로 회신
출처 : https://developer.mozilla.org/ko/docs/Web/API/Window/getComputedStyle - HTMLElement.dataset
=> 읽기 전용 속성
=> 요소의 사용자 지정 데이터 특성(data-*)에 대한 읽기와 쓰기 접근 방법을 HTML과 DOM 양측에 제공
출처 : https://developer.mozilla.org/ko/docs/Web/API/HTMLOrForeignElement/dataset - Element.classList
=> 엘리먼트의 클래스 속성의 컬렉션인 활성 DOMTokenList를 반환하는 읽기 전용 프로퍼티
출처 : https://developer.mozilla.org/ko/docs/Web/API/Element/classList - big project 시작
=> 기획 개요 및 일정 관리 수립