[Javascript 기초] DOM 스타일링

Javascript를 사용하여 DOM 객체의 style을 다루는 방법입니다.

 

1. style 변경 (단일 속성, 복수 속성)

2. style 읽어오기 (getComputedStyle)

---

1. style 속성 추가

style.css속성 또는 style.cssText를 사용하여 style을 정의할 수 있습니다.

1) style.css속성 : 기존에 정의된 style에 새로운 속성을 추가합니다.

*css속성은 카멜 케이스로 작성합니다. ex) background-color > backgroundColor

2) style.cssText : 기존에 정의된 style을 지우고, cssText로 덮어 씁니다.

 

See the Pen DOM 스타일링 by 김민기 (@srmvdusg-the-builder) on CodePen.

 

2. style 읽어오기 (getComputedStyle)

javascript는 html에는 접근이 가능하지만 css, sass에는 접근하여 탐색할 수 없기 때문에,

getComputedStyle을 사용하여 렌더링된 style을 읽어올 수 있습니다.

 

See the Pen Untitled by 김민기 (@srmvdusg-the-builder) on CodePen.