스타일쉬트(<STYLESHEET>, <STYLE>)에서 지정한 스타일들의 모든 요소별 스타일들의 컬렉션을 참조한다.

인수
: (개체)
필수적인 요소이고 컬렉션을 포함하는 모체 개체이다.

cVal : (컬렉션)
값은 선택적인 요소이고 컬렉션을 나타내는 개체이다.

oVal : (개체)
값은 선택적인 요소이고 컬렉션의 한개의 엘레멘트 개체이다.

index : (정수)
값은 필수적인 요소이고 컬렉션의 인수로 한개의 엘레멘트 개체를 참조할수 있고 배열변수의 규칙에따라 0부터 시작하고 제일 마지막 인수는 길이보다 1 작다.

특기

스타일쉬트가 활성화되어 있지 않더라도 이 컬렉션은 항상 접속할 수 있다. 개별 스트일쉬트의 rules 컬렉션에 addRule 메서드로 새로운 항목을 추가할 수 있다. disabled 스타일쉬트에 추가된 명령(rule)은 스타일쉬크가 사용가능(disabled=false)하게 되지 않으면 문서에 반영되지 않는다. 또한 removeRule 메서드로 삭제할 수 있다.

명령들의 컬렉션에서의 순서는 원본 문서에 나타나는 순서이다. CSS(Cascading Style Sheets) 개체 모델(Object Model)을 통하여 명령을 추가하거나 삭제하면 컬렉션에서의 순서가 바뀔수 있지만 상대적인 순서는 변하지 않는다. 인수(index)를 제공하지 않고 추가하면 자동적으로 문서의 제일 뒤에 추가된다. 그러나 인수를 제공하면 컬렉션의 현재의 위치에서 인수에 해당하는 위치에 삽입된다. 제공된 인수가 컬렉션의 최대 길이를 초과하면 제일 뒤에 추가된다.

적용
개체scriptHTML규격IE
참조

이 컬렉션은 (영문)DOM Level 1(W3C Document Object Model)에 정의되었다.


설명을 위한 예제


length 속성 IE
⇒ 컬렉션의 길이를 반환하거나 지정한다.
문법: [bVal=].length
코드: document.write(oObj.length); 결과:

item 메서드 IE
⇒ 인덱스로 컬렉션의 한개의 개체를 반환한다.
문법: [oVal=].item('iVal')
코드: document.write(oObj.item(0).selectorText) 결과:
코드: document.write(document.styleSheets[1].rules.item(0).selectorText) 결과:

컬렉션 예제

p class="rule0".

p class="rule1".

결과 표시창

여기서 해당 스타일쉬트는 document.styleSheets[2]이다.

<STYLE id=sObj>
.rule0 {color:'red';font-size:15}
.rule1 {color:'blue';font-size:.9em}
dt {color:blue;font-size:1.2em}
</STYLE>
<SCRIPT>
function oneColor(ruleIdx) {
  str='ruleIdx='+ruleIdx+'<BR>sObj.rules.item(ruleIdx).style.color=<FONT color=blue>'+
    document.styleSheets[0].rules.item(ruleIdx).style.color+'</FONT>';
  showA.innerHTML=str;
}
function allColor(ruleIdx){
  obj=document.styleSheets[2].rules
  str='<DL>';
  for (i=0;i< obj.length;i++){
    if ((ruleIdx=='a')||(ruleIdx==i)){
      str+='<DT>'+i+') obj.item('+i+').selectorText=<B>'+obj.item(i).selectorText+'</B><BR>';
      str+='<DD>obj.item('+i+').style.color='+obj.item(i).style.color+', ';
      str+='obj.item('+i+').style.fontSize='+obj.item(i).style.fontSize+'<BR>';
      str+='<DD>obj.item('+i+').style.cssText='+obj.item(i).style.cssText+'<BR>';
    }
  }
  showA.innerHTML='</DL>'+str;
}
</SCRIPT>
<P class="rule0">p class="rule0".</P>
<P class="rule1">p class="rule1".</P>
<BUTTON onclick="allColor(0)">rules[0]</BUTTON>
<BUTTON onclick="allColor(1)">rules[1]</BUTTON>
<BUTTON onclick="allColor(2)">rules[2]</BUTTON>
<BUTTON onclick="allColor('a')">rules 목록</BUTTON>
<DIV id=showA style="width:500;border:solid 1 blue">결과 표시창</DIV>