styleSheet 개체의 스타일 명령(rule)을 제거하고, rules 컬렉션의 인수들을 조정한다.
반환값은 없다.
스타일 명령(rule)이 제거되면 페이지는 자동적을 다시 표현되지 않는다.
변경된 내용이 표현되게 하려면 페이지를 다시 표현하도록 하여야한다.
몇가지 방식으로 다시 표현할 수 있다.
예를들어 텍스트를 자체에 설정하므로서 영향을 받은 텍스트에만 스타일의 변경을 다시 표현할 수 있다.
다른 방식으로는 reload 메서드로 문서 전체을 다시 로딩할 수 있다.
table에서는 refresh 메서드를 사용하여 다시 표현할 수 있다.
| 개체 | script | IE |
|---|
이 문자열은 새로운 스타일이 적용된다.
removeRule 메서드로 rules 컬렉션에서 한개의 rule 개체를 제거한다.
<STYLE>p.sample {color:red;font-weight:bold;}</STYLE>
<P id=oEffectRules class=sample>이 문자열은 새로운 스타일이 적용된다.</P>
<BUTTON onclick="removeTheRule()">새로운 스타일 명령을 제거한다.</BUTTON><BR>
원래 <DIV id=showA style="border:solid 1 blue"> </DIV>
결과 <DIV id=showB style="border:solid 1 brown"> </DIV>
<SCRIPT>
str='document.styleSheets.length='+document.styleSheets.length+'<BR>';
str+='document.styleSheets[1].style.cssText='+document.styleSheets[1].cssText+'<BR>';
str+='document.styleSheets[1].rules.length='+document.styleSheets[1].rules.length+'<BR>';
showA.innerHTML=str;
function removeTheRule(){
document.styleSheets[1].removeRule(0); // 0은 제일 먼저의 rule이다.
if (document.styleSheets[1].rules.length > 1){
showA.innerHTML=oEffectRules.innerHTML;
}
str='document.styleSheets.length='+document.styleSheets.length+'<BR>';
str+='document.styleSheets[1].style.cssText='+document.styleSheets[1].cssText+'<BR>';
str+='document.styleSheets[1].rules.length='+document.styleSheets[1].rules.length+'<BR>';
showB.innerHTML=str;
butObj.disabled=true;
}
</SCRIPT>