CSSStyleSheet

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

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

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

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

css

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

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

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

생성자

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

인스턴스 속성

부모인 StyleSheet를 상속합니다.

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

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

인스턴스 메서드

부모인 StyleSheet를 상속합니다.

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

레거시 속성

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

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

레거시 메서드

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

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

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

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

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

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

스타일 시트 얻기

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

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

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

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