Change CSS style at runtime

         
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

  <mx:Script>
    
    import mx.controls.Alert;

    import mx.styles.StyleManager;
    import mx.events.StyleEvent;

    private var lastCSS:String;
    private function changeCSS( name:String ):void{
      unloadCSS( false );
      var styleEvent:IEventDispatcher = StyleManager.loadStyleDeclarations( name, true );
      lastCSS = name;
    }
    private function unloadCSS( updateFlag:Boolean ):void{
      if( lastCSS )
        StyleManager.unloadStyleDeclarations( lastCSS, updateFlag );
    }
  
  </mx:Script>

  <mx:Panel id="pnlApp" title="Sample Application" layout="vertical" horizontalAlign="center">
      <mx:Label text="Title" />       
      <mx:Form>
        <mx:FormItem label="Password:">
          <mx:TextInput id="txtPassword" displayAsPassword="true" />
        </mx:FormItem>    
      </mx:Form>
      <mx:Button id="btnTrace" label="Login" styleName="sLogin" />
  </mx:Panel> 
  <mx:HBox>
    <mx:Button id="btnUnload" cornerRadius="0" click="unloadCSS( true )" label="Unload"/>
    <mx:Button id="btnBlue" cornerRadius="0" click="changeCSS( 'a.swf' )" label="Load CSS in SWF"/>
  </mx:HBox>
</mx:Application>

Related examples in the same category

1.	CSS Inline
2.	CSS Style Tag
3.	CSS like Styles
4.	Styles with Namespace
5.	Flex CSS: class definitions that work the same way as HTML CSS
6.	Using CSS to apply graphical skins
7.	Apply dropShadowEnabled to CSS
8.	CSS over write
9.	Add CSS for Application
10.	CSS class with namespace and without namespace
11.	Changing CSS Selectors
12.	CSS Type Selector
13.	Embeds an image in CSS
14.	Define the mySize variable and uses it in the CSS
15.	To specify an Array for the fills property in CSS, you use a comma-separated list
16.	Show how to use CSS class selectors to set the labelPosition and other properties that affect the appearance of data labels in a chart
17.	Two Spark Button controls inherit the styles of the Group descendant selector
18.	Using Spark namespace for the Button components and the MX namespace for the Box containers
19.	Using 9-slice properties
20.	Default unit is pixels
21.	Numeric Format Color Value
22.	Color Format Inline
23.	CamelCase vs hyphen
24.	Use tag, set the styles using CSS syntax
25.	CSS hexadecimal format for CSS style definitions and tag support
26.	Loading style sheets defined in CSS at run time
27.	Adding global CSS styles
28.	When you use the tag, you set the styles by using CSS syntax or a reference to an external file that contains style declarations, as the following example shows:
29.	The following example sets styles by using CSS on the Legend control:
30.	Apply style with CSS
31.	CSS style vs Control property style setting
32.	Use CSS to Style Components
33.	Embed Styles by Using CSS
34.	TextInput CSS style
35.	CSS style by ID

Change CSS style at runtime : CSS « Style « Flex

Related examples in the same category