[JavaScript] CSSOM

• CSSOM(CSS Object Model)은 Javascript로 CSS를 제어할 수 있는 API이다.
• DOM과 흡사하지만, HTML이 아닌 CSS를 위한 것으로 CSS를 동적으로 읽거나 수정할 수 있게 한다.

인라인 스타일

---

• element.style.propertyName 형식으로 사용할 수 있다.

document.body.style.background = 'tomato'; 
document.body.style.padding = '100px';

• - 로 연결된 속성은 camel case로 변환해서 사용할 수 있다.

document.body.style.backgroundColor = '#ccc';

• 인라인 스타일이 아닌 다른 속성은 읽어들일 수 없다.

console.log(document.body.style.color) // ''

계산된 스타일

---

• window.getComputedStyle 메소드를 이용해서 계산된 CSS 속성의 값을 가져올 수 있다.

window.getComputedStyle(document.body).color; // 'rgb(51, 51, 51)'

• 인라인 스타일이 아닌 다른 속성의 값을 얻을 수 있다.
• 선언되지 않은 모든 속성의 값을 얻게 된다. → 초깃값을 반환한다.

window.getComputedStyle(document.body).background; 
// 'rgb(255, 99, 71) none repeat scroll 0% 0% / auto padding-box border-box'

• width나 height 속성은 선언된 값이 아닌 실제 계산된 수치를 반환한다.

document.body.style.width = '100%'; // '100%' 
window.getComputedStyle(document.body).width; // '2560px'

P.S.

CSS도 하나의 트리 구조를 갖고 있으며, 쉽게 제어할 수 있다는 것을 알았다😀

참고 문서

---

• Javascript로 CSS 제어하기(1) - CSSOM : CSS Object Model by 이브라히모비치