KoXo 자바스크립트 - 개체(object) - STYLESHEET

문서의 한 스타일쉬트를 참조한다.

	Script	[propVal=]..propName;
	HTML	propName="propVal">innerString

특기

스타일쉬트의 원본 파일이나 스타일쉬트가 정의된 문서의 엘레멘트(owner)등을 이 styleSheet 개체를 통하여 반환할 수 있고, 스타일쉬트들을 수정할 수 있다.

styleSheets 컬렉션이나 도입 컬렉션(imports)으로부터 각 항목에 해당하는 styleSheet 개체를 참조할 수 있다. styleSheet 개체는 문서에 style나 link 엘레멘트에 포함되거나 style 개체 속에 @import 문장으로서 포함되어 있어야 한다.

이 개체는 IE4.0 이상에서 스크립트를 사용할 수 있다.

적용

개체	script	HTML	규격	IE
styleSheets	[oVal=]styleSheets(index)	없슴	없슴	IE4.0(win16,win32,ce,mac,unix)

설명을 위한 예제

<SCRIPT>str='styleSheet 목록 : ';for(i=0;i< document.styleSheets.length;i++){ str+=' ('+i+') '+document.styleSheets(i).id+', ';}document.write(str);</SCRIPT>

컬렉션	설명과 예제 코드	결과	참고
imports	지정된 스타일쉬트에 도입된 모든 스타일쉬트들의 컬렉션을 반환한다.
imports	<SCRIPT>document.write(document.styleSheets(3).imports.length);</SCRIPT>
pages	styleSheet에 명시된 @page 스타일 명령에 나타나는 모든 page 개체들의 컬렉션을 반환한다.
pages	<SCRIPT>document.write(document.styleSheets(4).pages.length);</SCRIPT>
rules	지정된 스타일쉬트에 있는 모든 스타일 명령(rule)들의 컬렉션을 반환한다.
rules	<SCRIPT>document.write(document.styleSheets(2).rules.length+' \| '+document.styleSheets(2).rules(0).selectorText);</SCRIPT>

개체	설명	결과
page	styleSheet에 명시된 @page 스타일 명령에 나타나는 page 개체를 반환한다.
	<SCRIPT>document.write(document.styleSheets(4).cssText);</SCRIPT>

	<SCRIPT>document.write(document.styleSheets(4).pages[0].pseudoClass);</SCRIPT>

canHaveHTML 속성 IE
⇒ 개체가 HTML 태그들을 가질 수 있는가를 부울값으로 반환한다.

문법: [bVal=].canHaveHTML

코드: document.write(oObj.canHaveHTML); 결과:

disabled 속성 IE (disabled[=true|false]> 애트리뷰트)
⇒ 사용자가 개체에서 작업할 수 있는가를 부울값으로 반환하거나 설정한다.

문법: .disabled[=true|false]

코드: document.write(oObj.disabled); 결과:

href 속성 IE (href="urlVal"> 애트리뷰트)
⇒ 개체의 목표나 연결 포인트의 주소를 반환하거나 설정한다.

문법: [urlVal=].href

코드: document.write(css2Obj.href); 결과:

id 속성 IE (id=sVal> 애트리뷰트)
⇒ 개체를 대표하는 인식자 문자열을 반환하거나 지정한다.

문법: .id[=sVal]

코드: document.write(oObj.id); 결과:

isContentEditable 속성 IE
⇒ 사용자가 개체의 내용을 편집할 수 있는가를 부울값으로 반환한다.

문법: [bVal=].isContentEditable

코드: document.write(oObj.isContentEditable); 결과:

isDisabled 속성 IE
⇒ 개체가 불활성화 되었는가를 부울값으로 반환한다.

문법: [bVal=].isDisabled

코드: document.write(oObj.isDisabled); 결과:

isMultiLine 속성 IE
⇒ 개체가 여러줄로 되어있는가를 부울값으로 반환한다.

문법: [bVal=].isMultiLine

코드: document.write(oObj.isMultiLine); 결과:

owningElement 속성 IE (owningElement=oVal> 애트리뷰트)
⇒ HTML 체계도에서 다음 개체를 반환한다.

문법: [oVal=].owningElement

코드: document.write(oObj.owningElement); 결과:

parentStyleSheet 속성 IE (parentStyleSheet=oVal> 애트리뷰트)
⇒ 현재 스타일쉬트에 도입된 스타일쉬트 파일 이름을 받은 개체를 반환한다.

문법: [oVal=].parentStyleSheet

코드: document.write(css3Obj.parentStyleSheet); 결과:

readyState 속성 IE
⇒ 개체의 현재 상태를 반환한다.

문법: [sVal=].readyState

코드: document.write(oObj.readyState); 결과:
코드: <SPAN id=SwRS></SPAN> <BUTTON onclick="SwRS.innerText=oObj.readyState">클릭</BUTTON> 결과:

title 속성 IE (title="sVal"> 애트리뷰트)
⇒ 스타일쉬트 개체의 제목을 반환하거나 설정한다.

문법: .title[=sVal]

코드: document.write(oObj.title); 결과:

type 속성 IE (type="sVal"> 애트리뷰트)
⇒ 현재 스타일쉬트가 쓰여진 언어를 반환한다.

문법: [sVal=].type

코드: document.write(css1Obj.type); 결과:

style	script
없슴	obj.style.cssText[=val]
⇒ 스타일 내용(rule)을 반환하거나 설정한다.
{media:val}	obj.style.media[=val]
⇒ 메디어 형식을 반환하거나 설정한다.
{text-autospace:val}	obj.style.textAutospace[=val]
⇒ 조정된 문자를 위한 자동 문자 간격 맞추기를 반환하거나 설정한다.

메서드	설명
addImport	imports 컬렉션에 지정한 를 추가한다.
addPageRule	에 새로운 page 개체를 추가한다.
addRule	개체에 새로운 스타일명령(rule)을 생성한다.
fireEvent	개체에서 지정한 이벤트를 발생시킨다.
removeRule	개체로부터 한 스타일명령(rule)을 삭제하고, rules 컬렉션 색인(index)들을 조정한다.

개체 예제

결과 표시창

<DIV id=showA>결과 표시창</DIV>
<DIV id=showB class=code style=margin:20;padding:3></DIV>
<SCRIPT>
str='document.styleSheets.length='+document.styleSheets.length+'<BR>';
for (i=0; i< document.styleSheets.length;i++){
  str+='document.styleSheets('+i+').href=<FONT color=blue>'+document.styleSheets(i).href+'</FONT><BR>';
}
showA.innerHTML=str;

str='document.styleSheets[1].id=<FONT color=blue>'+document.styleSheets[1].id+'</FONT><BR>';
str+='document.styleSheets[1].cssText=<BR><FONT color=blue>'+document.styleSheets[1].cssText+'</FONT>';
showB.innerHTML=str;