티스토리 뷰
CSSOM 이란?
MDN을 참고해보자 : (https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model)
The CSS Object Model is a set of APIs allowing the manipulation of CSS from JavaScript. It is much like the DOM, but for the CSS rather than the HTML. It allows users to read and modify CSS style dynamically.
CSS Object Model은 Javascript로 CSS를 제어할 수 있는 API 모음이다. DOM과 흡사하지만, HTML이 아닌 CSS를 위한 것이다. 사용자가 CSS를 동적으로 읽거나 수정할 수 있게 해준다.
element.style을 통한 인라인 스타일
Javascript를 사용해서 CSS를 조작하는 가장 기본적인 방법은 style 을 이용하는 것이다.
element.style.propertyName 으로 적용할 수 있다.
만약 background-color 를 적용하고 싶다면? - 로 연결된 속성은 camel case로 변환해서 사용할 수 있다.
element.style 을 이용하면 쉽게 CSS 속성과 값을 선언할 수 있지만, 한가지 문제점이 있다. 오직 인라인 스타일에만 적용된다는 점이다. style 속성을 이용해서 선언한 내용을 읽어보자.
위 코드에서 배경색을 읽어보았다. 잘 동작한다. 하지만 그 요소의 다른 속성을 읽으려고 하면 아무것도 반환하지 않는다. 아래 코드를 확인해보자.
<body> 에 color 속성을 정의한 스타일시트가 있다고 해도 인라인 스타일이 아니면 아무것도 얻을 수 없다. 이를 해결할 수 있는 유용한 기술들을 살펴보자.
계산된(computed) 스타일 가져오기
window.getComputedStyle() 메소드를 이용해서 계산된 CSS 속성의 값을 가져올 수 있다.
인라인으로 지정된 스타일이 아니더라도 값을 얻는게 가능하다. 그렇지만, -style은 너무 적은 정보를 제공한것에 비해- window.getComputedStyle() 는 간혹 너무 많은 정보를 제공한다.
위 예제에서, <body> 에는 오직 배경색만 지정되어 있었다. 하지만 getComputedStyle() 은 background 가 가지는 모든 속성의 값을 알려준다. CSS에서 선언되지 않은 값들은 초기값(혹은 기본값)을 반환한다.
또한, width 나 height 속성은 선언된 값이 아닌 실제 계산된 수치를 반환한다. 이는 window.innerWidth 와 비슷한 동작 방식이다.
window.getComputedStyle() 메소드를 이용해 속성을 가져오는 몇가지 방식을 소개한다.
가상 요소(pseudo-element)에 접근
window.getComputedStyle() 메소드에 두번째 인자를 전달하면 가상 요소의 속성에 접근할 수 있다.
placeholder 나 first-line 에도 활용할 수 있다.
setProperty(), getPropertyValue(), item(), removeProperty()
- setProperty() : 설정, 2개의 인자 (속성,값)
- getProperty() : 가져오기, 1개의 인자
- item() : 가져오려는 속성의 인덱스를 인자로 사용
- removeProperty() : 삭제
setProperty()와 getPropertyValue()에서 fontSize 대신 문자열 'font-size'를 사용한것에 주의하자.
속성의 우선순위 설정
기존 예제들과 동일하게 setProperty()를 메소드를 사용했지만, 세번째 인자로 'important' 를 전달한 것에 주목하자. 이는 속성에 '!important' 를 부여하게 된다. 세번째 인자는 생략 가능하며, undefined나 빈 문자열도 전달할 수 있다.
값으로 !important를 부여한 후, 해당 속성의 우선순위를 확인하기 위해 getPropertyPriority() 메소드를 사용했다.
한가지 흥미로운 사실은 축약형을 사용해도 모두 동일한 값을 반환한다는 것이다.
다음 포스트 : Javascript로 CSS 제어하기(2) - CSSOM : CSS Object Model
참고 : https://css-tricks.com/an-introduction-and-guide-to-the-css-object-model-cssom/
'javascript > etc.' 카테고리의 다른 글
| Javascript로 CSS 제어하기(2) - CSSOM : CSS Object Model (2) | 2019.01.10 |
|---|---|
| 자바스크립트 객체지향 프로그래밍 Javascript Object Oriented Programming (0) | 2018.11.12 |
| console.log : 우리가 모르는 유용한 기능들 (0) | 2018.07.31 |
| Node js로 webp 변환기 (webp converter) 만들기 (0) | 2018.07.26 |
| DataTables 한글 - language 옵션 설정 (8) | 2018.01.09 |
- Total
- Today
- Yesterday