ActionScript에서 HTML 스타일 시트 조작

Adobe AIR 1.0 이상

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 이벤트를 전달한 이후에만 코드가 페이지에 스타일을 추가할 수 있다는 사실을 기억하십시오.