Manipulation d’une feuille de style HTML à partir d’ActionScript

Adobe AIR 1.0 et ultérieur

Dès que l’objet HTMLLoader a distribué l’événement complete, vous pouvez étudier et manipuler les styles CSS dans une page.

Par exemple, examinez la page HTML simple suivante :

<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>

Après le chargement de ce contenu par un objet HTMLLoader, vous pouvez manipuler les styles CSS dans la page par le tableau cssRules du tableau window.document.styleSheets, comme vous pouvez le voir ci-dessous :

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"; 
}

Le code ajuste les styles CSS pour que le document HML résultant apparaisse comme ci-dessous :

N’oubliez pas que le code ne peut ajouter des styles à la page qu’après la distribution de l’événement complete par l’objet HTMLLoader.