스타일 시트는 CSSStyleSheet 유형으로 표현됩니다. 여기에는 요소를 통해 포함된 스타일 시트와
브라우저가 DOM2 수준 스타일 시트를 지원하는지 확인하려면 다음 방법을 사용하세요.
var supportsDOM2StyleSheets = document.implementation.hasFeature("StyleSheets","2.0");CSSStyleSheet는 StyleSheet에서 상속됩니다. StyleSheet는 CSS가 아닌 스타일 시트를 정의하기 위한 기본 인터페이스로 사용할 수 있습니다. StyleSheet 인터페이스에서 상속된 속성은 다음과 같습니다.
disabled: 스타일 시트를 비활성화할지 여부. 이 속성은 읽고 쓸 수 있습니다. 값을 true로 설정하면 스타일 시트가 비활성화됩니다.
href: 스타일 시트가 를 통해 포함된 경우 이 속성은 스타일 시트의 URL이고, 그렇지 않으면 null입니다.
미디어: 현재 스타일 시트에서 지원하는 모든 미디어 유형의 모음입니다. 모든 DOM 컬렉션과 마찬가지로 이 컬렉션에도 length 속성과 item() 메서드가 있습니다. 대괄호 구문을 사용하여 컬렉션의 지정된 항목을 가져올 수도 있습니다. 컬렉션이 빈 목록이면 스타일 시트가 모든 미디어에 적용된다는 의미입니다. Internet Explorer에서 미디어는 요소의 미디어 속성 값을 반영하는 문자열입니다.
ownerNode: 현재 스타일 시트를 소유한 노드에 대한 포인터입니다. 스타일 시트는 요소를 통해 HTML에 도입될 수 있습니다. @import를 통해 현재 스타일 시트를 가져온 경우 속성 값은 null입니다. IE 브라우저는 이 속성을 지원하지 않습니다.
parentStyleSheet: @import를 통해 현재 스타일 시트를 가져오는 경우 이 속성은 해당 스타일 시트를 가져온 스타일 시트에 대한 포인터입니다.
title: ownerNode의 제목 속성.
type: 스타일 시트 유형을 나타내는 문자열입니다. CSS 스타일 시트의 경우 이 문자열은 "type/css"입니다.
disable 속성을 제외한 위 속성은 모두 읽기 전용 속성입니다. 위에 나열된 속성 외에도 CSSStyleSheet는 다음 속성과 메서드도 지원합니다.
cssRules: 스타일 시트에 포함된 스타일 규칙 모음입니다. IE는 이 속성을 지원하지 않지만 비슷한 규칙 속성이 있습니다.
ownerRule: @import를 통해 스타일 시트를 가져온 경우 이 속성은 가져오기를 나타내는 규칙에 대한 포인터이고, 그렇지 않으면 null입니다. IE는 이 속성을 지원하지 않습니다.
deleteRule(index): cssRules 컬렉션의 지정된 위치에서 규칙을 삭제합니다. IE는 이 메서드를 지원하지 않지만 유사한 RemoveRule() 메서드가 있습니다.
insertRule(rule,index): cssRules 컬렉션의 지정된 위치에 규칙 문자열을 삽입합니다. IE는 이 메소드를 지원하지 않지만 비슷한 addRule() 메소드가 있습니다.
문서에 적용된 모든 스타일 시트는 document.styleSheets 컬렉션으로 표시됩니다. 문서에 포함된 스타일 시트의 개수는 이 컬렉션의 length 속성을 통해 알 수 있으며, 각 스타일 시트는 대괄호 구문이나 item() 메서드를 통해 액세스할 수 있습니다. 예를 들어, 다음 코드는
var styleSheet = null;
for(var i = 0,len = document.styleSheets.length; i < len; i++){
styleSheet = document.styleSheets[i];
console.info(styleSheet.href);
}
결과는 아래와 같습니다.
위 코드는 다음을 출력합니다. 모든 스타일시트의 href 속성입니다.
document.styleSheet가 반환하는 스타일 시트는 브라우저마다 다릅니다. 모든 브라우저에는