문의 id가 sampleCss인 styleSheets로부터 item 메서드로 개별 항목을 반환받아 그 명령(rule)들을 디스플레이한다.

<LINK id="sampleCss" rel="stylesheet" type="text/css" href="../object/exp/styleSheetTest.css">
<LINK id="sample1Css" rel="stylesheet" type="text/css" href="../object/exp/sample.css">
<SCRIPT>
function showStyleSheets(){
  cssObj=document.styleSheets.item('sampleCss');
  var oColl=cssObj.rules;
  str='cssObj.rules.length='+oColl.length+'<BR>';
  if (oColl!=null){
    for (i=0;i< oColl.length;i++){
      str+=i+'] oColl.item('+i+').selectorText=<FONT color=blue>'+oColl.item(i).selectorText+'</FONT><BR>';
      str+=i+'] oColl.item('+i+').style.cssText=<FONT color=green>'+oColl.item(i).style.cssText+'</FONT><BR>';
    }
  }
  showA.innerHTML=str;
}

function showSelectorText(){
  cssObj=document.styleSheets.item('sample1Css');
  str='cssObj.rules.length='+cssObj.rules.length+'<BR>';
  if (cssObj.rules!=null){
    for (i=0;i< cssObj.rules.length;i++){
      str+=i+'] cssObj.rules.item('+i+').selectorText=<FONT color=blue>'+cssObj.rules.item(i).selectorText+'</FONT><BR>';
    }
  }
  showA.innerHTML=str;
}
</SCRIPT>
<DIV class=stylesheetTestClass>1번 스타일쉬트를 적용한 DIV</DIV>
<BUTTON onclick="showStyleSheets()">스타일쉬트 항목 보기 1</BUTTON>
<BUTTON onclick="showSelectorText()">스타일쉬트 항목 보기 2</BUTTON>
<DIV id=showA>결과 표시창</DIV>