Javascript로 CSS 제어하기(2) - CSSOM : CSS Object Model

이전 포스트 : Javascript로 CSS 제어하기(1) 에서 인라인 스타일(별로 유용하지 않음)과 계산된 스타일(유용하지만 너무 구체적일 수 있음)을 다루는 방법을 알아보았다.

CSSStyleSheet 인터페이스

인라인 스타일에 국한되지 않고 값을 읽고 쓸 수 있는 보다 유용한 API는 CSSStylesSheet API 이다. 간단하게 문서의 스타일시트 정보에 접근할 수 있는 방법은 현재 document의 styleSheets 프로퍼티를 사용하면 된다. 이것이 CSSStyleSheet 인터페이스다.

아래 코드는 length 프로퍼티를 사용해서 현재 document가 몇개의 스타일시트를 가지는지 볼 수 있다. 인덱싱을 통해 접근하는 것도 가능하다.

console 창에 로그를 찍어보면 사용 가능한 메소드와 속성들을 볼 수 있다.

한가지 유용한 속성이 cssRules 이다. 이 속성은 모든 CSS룰(블록 선언, @룰, 미디어 룰)들을 포함하고 있다. 이제 이 API를 사용해 외부 스타일시트를 읽고 조작하는 법을 알아보자.

스타일시트 객체로 작업하기

간단하게 몇가지 룰만 있는 샘플 스타일시트를 사용해보자. DOM스크립트로 요소에 접근하는 것처럼 CSSOM을 사용해 스타일시트에 접근할 수 있다.

우선 스타일 규칙을 반복하면서 기록해보자.

먼저 cssRules 를 통해 접근한 후, 모든 규칙을 반복하면서 각각의 타입을 체크한다.

위의 경우, 타입이 1 인 경우 로그를 기록하는데 이는 STYLE_RULE 을 나타낸다. 다른 타입은 각각 IMPORT_RULE (3), MEDIA_RULE (4), KEYFRAMES_RULE (7) 등으로 정의 되어 있으며, 자세한 사항은 MDN 문서에서 확인할 수 있다.

STYLE_RULE 로 확인되면 selectorText 를 이용해 기록한다. selectorText 속성은 선택자의 문자를 표현한다. 이 속성은 쓰기가 가능하기 때문에, 만약 특정 규칙의 수정을 원한다면 아래와 같이 바꿔줄 수 있다.

위 예제에서, a:hover 로 선언된 선택자를 찾아 a:active 를 추가했다. 또한 문자열 메소드나 정규표현식을 사용해서 :hover 인스턴스를 찾은 후 뭔가를 해줄수도 있다.

미디어쿼리(@media) 제어

MEDIA_RULE 은 타입이 4이다.

conditionText 속성을 이용해 @media 의 조건을 알 수 있다.

루프는 모든 미디어쿼리를 돌면서 로그를 남긴다. mediaText 도 동일한 결과를 반환한다. set 과 get 모두 해줄 수 있다.

키프레임(@keyframes) 제어

7번으로 접근한 다음 keyText 로 읽어올 수 있다.

예제 CSS 에는 from 과 to 로 작성되어 있지만, keyText 는 이를 0% 와 100% 로 계산한다. keyText 값 또한 수정할 수 있다.

이것을 사용하면, 사용자 액션에 따라 다른 키프레임을 적용할 수 있다. @keyframes 의 또 다른 속성에는 name 이 있다.

새로운 예제를 만들고 style 속성에 관한 내용을 살펴보자.

style 로 color 를 가져오거나 수정할 수 있다.

CSS 구문 추가/제거

CSSStyleSheet 에는 추가/제거 할 수 있는 메소드가 있다: insertRule() 과 deleteRule() 이다.

insertRule() 메소드를 이용해 추가 후 개수를 확인해보면 하나 늘어 있는것을 볼 수 있다.

insertRule() 메소드는 첫번째 필수 인자로 (선택자, 괄호등을 모두 포함하는) 문자열을 받는다.

두번째 인자는 선택이다. 인덱스 숫자로 위치를 선택할 수 있다. 두번째 인자가 없다면 기본값은 0 이다. 만약 인덱스가 규칙 객체수보다 많다면 에러를 발생시킨다.

deleteRule() 메소드는 좀 더 사용하기 쉽다.

인자로 삭제할 인덱스를 받는다.

참고 : https://css-tricks.com/an-introduction-and-guide-to-the-css-object-model-cssom/