HTMLLoader 객체에서
complete
이벤트를 전달하면 페이지에서 CSS 스타일을 검토하고 조작할 수 있습니다.
예를 들어 다음과 같은 간단한 HTML 문서를 살펴봅니다.
<html>
<style>
.style1A { font-family:Arial; font-size:12px }
.style1B { font-family:Arial; font-size:24px }
</style>
<style>
.style2 { font-family:Arial; font-size:12px }
</style>
<body>
<p class="style1A">
Style 1A
</p>
<p class="style1B">
Style 1B
</p>
<p class="style2">
Style 2
</p>
</body>
</html>
HTMLLoader 객체가 이 내용을 로드하면 여기에 나와 있는 대로
window.document.styleSheets
배열의
cssRules
배열을 통해 페이지에서 CSS 스타일을 조작할 수 있습니다.
var html:HTMLLoader = new HTMLLoader( );
var urlReq:URLRequest = new URLRequest("test.html");
html.load(urlReq);
html.addEventListener(Event.COMPLETE, completeHandler);
function completeHandler(event:Event):void {
var styleSheet0:Object = html.window.document.styleSheets[0];
styleSheet0.cssRules[0].style.fontSize = "32px";
styleSheet0.cssRules[1].style.color = "#FF0000";
var styleSheet1:Object = html.window.document.styleSheets[1];
styleSheet1.cssRules[0].style.color = "blue";
styleSheet1.cssRules[0].style.font-family = "Monaco";
}
이 코드는 결과 HTML 문서가 다음과 같이 표시되도록 CSS 스타일을 조정합니다.
HTMLLoader 객체가
complete
이벤트를 전달한 이후에만 코드가 페이지에 스타일을 추가할 수 있다는 사실을 기억하십시오.