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
객체일 수 있습니다.
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. 목록에 나타남
|
스타일 시트 객체가 주어진 소유자 요소/규칙 가져오기 | 소유자 객체를 위한 인터페이스 | 소유자로부터 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