CSSStyleSheet

CSSStyleSheet 인터페이스는 단일 CSS 스타일 시트를 나타내며, 그 안에 포함된 규칙 목록을 검사하고 수정할 수 있게 합니다. 이 인터페이스는 그 부모인 StyleSheet로부터 속성과 메서드를 상속합니다.

스타일 시트는 스타일 시트에 포함된 각 규칙을 나타내는 객체인 CSSRule (en-US)의 모음으로 구성되어 있습니다. 그 규칙들은 스타일 시트의 cssRules (en-US) 속성으로부터 얻을 수 있는 CSSRuleList (en-US)에 포함되어 있습니다.

예를 들어, 어떤 규칙은 다음과 같은 스타일을 포함하는 CSSStyleRule (en-US) 객체일 수 있습니다.

css

h1,
h2 {
  font-size: 16pt;
}

또 다른 규칙은 @import 또는 @media 등과 같은 규칙일 수 있습니다.

CSSStyleSheet 객체를 얻을 수 있는 다양한 방법을 알아보려면 스타일 시트 얻기 부분을 살펴보세요. 또한 CSSStyleSheet는 직접 생성될 수 있습니다. 그 생성자와 CSSStyleSheet.replace() (en-US), CSSStyleSheet.replaceSync() (en-US) 메서드들은 새롭게 추가된 명세들로, '생성가능한 스타일 시트'를 사용가능하게 합니다.

생성자

CSSStyleSheet() (en-US): 새로운 CSSStyleSheet 객체를 만듭니다.

인스턴스 속성

부모인 StyleSheet를 상속합니다.

CSSStyleSheet.cssRules (en-US) 읽기 전용: 스타일 시트를 구성하는 최신의 CSSRule (en-US) 객체 목록을 유지하는 실시간 CSSRuleList (en-US)를 반환합니다.

참고: 어떤 브라우저에서는, 다른 도메인에서 스타일 시트가 로드되면, cssRules에 접근시 SecurityError가 발생합니다.
CSSStyleSheet.ownerRule (en-US) 읽기 전용: 만약 스타일 시트가 @import 규칙을 사용하는 문서로부터 오면, ownerRule 속성이 해당하는 CSSImportRule (en-US)을 반환합니다. 그렇지 않으면 이 속성 값은 null입니다.

인스턴스 메서드

부모인 StyleSheet를 상속합니다.

CSSStyleSheet.deleteRule() (en-US): 스타일 시트의 규칙 목록에서 특정 인덱스의 규칙을 삭제합니다.
CSSStyleSheet.insertRule() (en-US): 주어진 규칙의 텍스트 표현에 따라 스타일 시트의 특정 위치에 새로운 규칙을 삽입합니다.
CSSStyleSheet.replace() (en-US): 비동기적으로 스타일 시트의 내용을 대체하고 업데이트된 CSSStyleSheet를 처리하는 Promise를 반환합니다.
CSSStyleSheet.replaceSync() (en-US): 스타일 시트의 내용을 동기적으로 대체합니다.

레거시 속성

이 속성들은 마이크로소프트에 의해 소개된 레거시 속성입니다. 이 속성들은 이미 운영중인 사이트의 호환성을 위해 유지됩니다.

rules (en-US) 읽기 전용 지원이 중단되었습니다: rules 속성은 기능적으로 표준 cssRules (en-US)와 동일합니다. 스타일 시트의 모든 규칙 목록을 최신으로 유지하는 실시간 CSSRuleList (en-US)를 반환합니다.

레거시 메서드

이 메서드들은 마이크로소프트에 의해 소개된 레거시 메서드입니다. 이 메서드들은 이미 운영중인 사이트의 호환성을 위해 유지됩니다.

addRule() (en-US) 지원이 중단되었습니다

적용될 선택자와 일치하는 요소들에 적용할 스타일을 고려하여 새로운 규칙을 스타일 시트에 추가합니다.

이 메서드는 모든 규칙의 텍스트 표현을 하나의 문자열로 받는 insertRule() (en-US)과는 다릅니다.

removeRule() (en-US) 지원이 중단되었습니다

기능적으로 deleteRule() (en-US)와 동일합니다. 스타일 시트 규칙 목록의 특정 인덱스 규칙을 삭제합니다.

스타일 시트 얻기

스타일시트는 최대 하나의 Document에 연관되어 있으며, 그 문서에 (disabled (en-US)가 아니라면)적용됩니다. 주어진 문서의 CSSStyleSheet 객체 목록은 Document.styleSheets 속성을 사용하여 얻을 수 있습니다. 또한 특정 스타일 시트는 그 소유자 객체 (Node 또는 CSSImportRule)로부터 접근할 수 있습니다.

CSSStyleSheet 객체는 스타일 시트가 문서에 로드될 때, 그 문서의 Document.styleSheets 목록으로 브라우저에 의해 자동으로 생성되고 삽입됩니다.

스타일 시트가 문서와 연관될 수 있는 (아마 완성되지 않은)방법들은 다음과 같습니다.

스타일 시트가 문서와 연관된 이유	`document. styleSheets` 목록에 나타남	스타일 시트 객체가 주어진 소유자 요소/규칙 가져오기	소유자 객체를 위한 인터페이스	소유자로부터 CSSStyleSheet 객체 가져오기
문서의 `<style>`와 `<link>` 요소	Yes	`.ownerNode` (en-US)	`HTMLLinkElement` (en-US), `HTMLStyleElement` (en-US), or `SVGStyleElement` (en-US)	`HTMLLinkElement.sheet` (en-US), `HTMLStyleElement.sheet` (en-US), or `SVGStyleElement.sheet` (en-US)
문서에 적용된 다른 스타일 시트의 CSS `@import` 규칙	Yes	`.ownerRule` (en-US)	`CSSImportRule` (en-US)	`.styleSheet` (en-US)
(HTML이 아닌) 문서의 `<?xml-stylesheet ?>` 처리 지시문	Yes	`.ownerNode` (en-US)	`ProcessingInstruction` (en-US)	`.sheet` (en-US)
HTTP Link Header	Yes	N/A	N/A	N/A
사용자 에이전트 (기본) 스타일 시트	No	N/A	N/A	N/A

명세서

Specification
CSS Object Model (CSSOM) # the-cssstylesheet-interface

브라우저 호환성

BCD tables only load in the browser