CSS Object Model

CSS Object Model

설명

CSS 객체 모델은 JavaScript에서 CSS를 조작 할 수 있게 해주는 다양한 API 집합체이다. 다루는 대상이 요소가 아닌 CSS 자체라 볼 수 있다.

계층 탐색

  • CSSStyleDeclaration

    HTMLElement 객체에 대한 CSS 속성의 값을 설정하거나 조회를 다루는 객체이다. HTMLElement 객체의 style 프로퍼티에 의해 참조되거나 CSSStyleSheet 인터페이스, Window 객체의 프로토타입 메소드 getComputedStyle() 의해 참조된다.
    • Constructor

      생성자
      • CSSStyleDeclaration()

        생성자 함수이지만 직접 생성할 수 없고 자동 생성이 되며 HTMLElement 객체의 style 프로퍼티에 의해서 참조된다.
    • Methods

      메소드
      • getPropertyPriority()

        CSS 속성에 대해 명시적으로 설정된 우선 순위를 제공하는 DOMString을 조회한다.
      • getPropertyValue()

        인수로 지정된 CSS 속성 값을 포함하는 DOMString을 반환한다.
      • item()

        인수로 지정된 인덱스 값의 CSS 속성 명을 반환한다. 이 메소드는 인수를 제공하는 한 예외를 발생시키지 않는다. 인덱스가 범위를 벗어나면 빈 문자열이 반환되고 인수가 누락되면 TypeError가 발생한다.
    • Properties

      속성
      • cssText

        요소에게 설정된 모든 인라인 CSS 속성 값을 텍스트로 가져올 수 있거나 설정할 수 있다.
      • length

        CSS 선언 블록의 정의되어 있는 속성의 수를 정수로 조회한다.
      • parentRule

        CSS 규칙 집합(선택자 및 선언 블록)을 나타내는 CSSRule 개체를 참조한다.
  • Data structure

    자료 구조
    • CSSRuleList

      순서가 지정된 CSSRule 객체 컬렉션을 포함하는 유사 배열 객체이다.
  • StyleSheet

    단일 스타일시트 객체를 구현한다.
    • Constructor

    • Inherited

      StyleSheet를 상속하는 객체군
      • CSSStyleSheet

        스타일시트에 포함된 규칙 목록을 검사하고 수정할 수 있도록 해주는 CSSSRule 객체 컬렉션으로 구성된 객체이다.
        • Constructor

        • Methods

          메소드
          • deleteRule()

            지정된 인덱스를 갖는 스타일시트 규칙을 제거한다.
          • insertRule()

            인수로 지정된 규칙을 갖는 문자열을 스타일 시트의 지정된 위치에 새로 삽입한다.
        • Properties

          프로퍼티스
          • cssRules

            스타일 시트를 구성하는 CSSRule 객체의 최신 목록을 유지하는 라이브 CSSRuleList를 참조한다.
          • ownerRule

            스타일 시트를 @import 룰을 사용하여 문서로 가져오는 경우 해당 CSSImportRule을 참조한다.
    • Properties

      • disabled

        현재 스타일 시트가 적용 되었는지 여부를 나타내는 Boolean 값을 조회한다.