他のプロパティと異なり、コンポーネントのスタイルプロパティを直接 get または set することはできません。その代わり、ActionScript メソッドである getStyle() および setStyle() を使用して、実行時にスタイルプロパティを設定します。getStyle() および setStyle() メソッドを使用すると、オブジェクトのインスタンスまたはスタイルシートのスタイルプロパティにアクセスできます。

これらのメソッドは、すべての Flex コンポーネントで公開されます。オブジェクトをインスタンス化し、初めてスタイルを設定する際は、コンピュータへの負荷が大きい setStyle() メソッドの使用より、スタイルシートの適用を試行してください。このメソッドは、実行時にオブジェクトのスタイルを変更する場合にのみ使用してください。詳細については、setStyle() メソッドによるパフォーマンスの向上を参照してください。

スタイルの設定

getStyle() メソッドのシグネチャを次に示します。

var:return_type componentInstance.getStyle(property_name)

return_type は、アクセスするスタイルによって異なります。スタイルは String、Number、Boolean などの型で、スキンの場合は Class です。property_name は、スタイルプロパティの名前（fontSize など）を表す String です。

setStyle() メソッドのシグネチャを次に示します。

componentInstance.setStyle(property_name, property_value)

property_value は、指定したプロパティの新しい値を設定します。プロパティの有効な値については、『Adobe Flex リファレンスガイド』を参照してください。

次の例では、getStyle() および setStyle() メソッドを使用して、ボタンの fontSize スタイルを変更し、新しいサイズを TextInput 内に表示します。

<?xml version="1.0"?>
<!-- styles/SetSizeGetSize.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Style>
     Button { 
        fontSize: 10pt; 
        color: Blue; 
     }
     .myClass {
        fontFamily: Arial, Helvetica, "_sans";
        color: Red;
        fontSize: 22;
        fontWeight: bold;
     } 
  </mx:Style>
  <mx:Script><![CDATA[
     public function showStyles():void {
        lb1.text = String(ip1.getStyle("fontSize"));
     }
     public function setNewStyles(newSize:Number):void {
        ip1.setStyle("fontSize",newSize);
     }
  ]]></mx:Script>
  <mx:VBox id="vb">
     <mx:TextInput styleName="myClass" text="My attrs" id="ip1"
        width="400"/>
     <mx:Label id="lb1" text="" width="400"/>
     <mx:Button label="Get Style" click="showStyles();"/>
     <mx:Button label="Set Style" click="setNewStyles(Number(ip2.text));"/>
     <mx:TextInput text="" id="ip2" width="50"/>
  </mx:VBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

getStyle() メソッドを使用すると、スタイルプロパティの設定方法に関係なくスタイルプロパティにアクセスできます。スタイルプロパティを <mx:Style> タグ内ではなく、インラインのタグプロパティとして定義した場合、このスタイルを get および set できます。<mx:Style> タグ内や外部スタイルシート内など、なんらかの方法で適用されたスタイルプロパティをオーバーライドできます。

次の例では、スタイルプロパティをインラインで設定した後、getStyle() メソッドを使用してそのプロパティを読み取ります。

<?xml version="1.0"?>
<!-- styles/GetStyleInline.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script><![CDATA[
     private function readStyle():void {
        myLabel.text = "Style: " + myLabel.getStyle("fontStyle");
     }
  ]]></mx:Script>
  <mx:VBox width="500"
     height="200">
     <mx:Button id="b1" click="readStyle()" label="Get Style"/>
     <mx:Label fontStyle="italic" id="myLabel"/>
  </mx:VBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

setStyle() メソッドでカラーのスタイルプロパティを設定する場合、次の例に示すように、16 進形式または VGA カラー名のいずれかを使用できます。

<?xml version="1.0"?>
<!-- styles/ColorFormatStyleManager.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()">
  <mx:Script><![CDATA[
     public function initApp():void {
        StyleManager.getStyleDeclaration("Button").
            setStyle("themeColor",0x6666CC);
        StyleManager.getStyleDeclaration("Button").
            setStyle("color","Blue");
     }

     public function changeStyles(e:Event):void {
        e.currentTarget.setStyle("themeColor", 0xFF0099);
        e.currentTarget.setStyle("color", "Red");
     }
  ]]></mx:Script>
  <mx:Button id="myButton" 
        label="Click Here" 
        click="changeStyles(event)"
  />
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

getStyle() メソッドを使用して color のスタイルプロパティを取得すると、スタイルプロパティの 16 進数値を表す整数が返されます。この値を 16 進形式に変換するには、カラー変数の toString() メソッドを使って、その基数（または基底）に 16 を渡します。

<?xml version="1.0"?>
<!-- styles/ColorFormatNumericValue.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()">

  <mx:Style>
     Button {
        color: #66CCFF;
     }
  </mx:Style>

  <mx:Script><![CDATA[
     [Bindable]
     private var n:Number;

     private function initApp():void {
        n = myButton.getStyle("color");
     }

     public function changeStyles(e:Event):void {
        if (myButton.getStyle("color").toString(16) == "ff0000") {
           myButton.setStyle("color", 0x66CCFF);            
        } else {
           myButton.setStyle("color", "Red");           
        }
        
        n = myButton.getStyle("color"); //// Returns 16711680
     }
  ]]></mx:Script>
  
  <mx:Button id="myButton" label="Click Here" click="changeStyles(event)"/>

  <mx:Label id="myLabel" text="0x{n.toString(16).toUpperCase()}"/>

</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

setStyle() メソッドを使用して既存のスタイルを変更しても（例えば、Button コントロールの color プロパティをデフォルトの 0x000000 以外に設定する場合など）、元のスタイル設定は上書きされません。元の設定に戻すには、スタイルプロパティを null に設定します。次の例ではこの手法を使用して、Button コントロールのカラーを青とデフォルト設定の間で切り替えます。

<?xml version="1.0"?>
<!-- styles/ResetStyles.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script> 
        <![CDATA[
        public function toggleStyle():void {
            if (cb1.selected == true) {
                b1.setStyle("color","blue");
                b1.setStyle("fontSize", 8);
            } else {
                b1.setStyle("color", null);
                b1.setStyle("fontSize", null);
            }                       
        }
        ]]>
    </mx:Script>   
    
    <mx:Style>
    
        Button {
            color: red;
            fontSize: 25;
        }
    
    </mx:Style>

    <mx:Button id="b1" label="Click Me"/>

    <mx:CheckBox id="cb1" 
        label="Set Style/Unset Style" 
        click="toggleStyle()" 
        selected="false"
    />
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

setStyle() メソッドによるパフォーマンスの向上

実行時のカスケーディングスタイルは非常に有用ですが、むやみに使用せずに、正しいコンテキストで使用する必要があります。オブジェクトのインスタンスに対して動的にスタイルを設定するということは、UIComponent の setStyle() メソッドにアクセスすることを意味します。setStyle() メソッドの呼び出しを使用すると、新しくスタイルを設定したオブジェクトのすべての子に対して、再度スタイル参照を実行するように通知する必要があります。したがって、このメソッドの呼び出しは、Flex フレームワークにおいて最もリソースを要する呼び出しの 1 つです。通知を必要とする子のツリーは、非常に大きくなる場合があります。

パフォーマンスに影響を与える失敗として一般的なものは、setStyle() メソッドを使い過ぎることや、不必要な場合にも使用することです。一般的に、setStyle() メソッドを使用する必要があるのは、既存のオブジェクトのスタイルを変更する場合のみです。オブジェクトのスタイルを初めて設定する際には使用しないでください。代わりに <mx:Style> ブロック内で外部 CSS スタイルシートを通して、あるいはグローバルスタイルとしてスタイルを設定します。プログラムの実行中（アプリケーション、ナビゲータコンテナ内の新しいビュー、動的に作成されたコンポーネントなど）にスタイルが変更される予定がない場合には、正しいスタイル情報を使用してオブジェクトを初期化することが重要です。

アプリケーションによっては、アプリケーションまたはオブジェクトのインスタンス化の際に setStyle() メソッドを呼び出す必要があります。その場合、初期化の早い段階で setStyle() メソッドを呼び出します。つまり creationComplete などのイベントではなく、コンポーネントまたはアプリケーションの preinitialize イベントからスタイルを設定するということです。初期化の際にできるだけ早くスタイルを設定することで、不要なスタイル通知や参照を避けます。コンポーネントの起動ライフサイクルの詳細については、起動時のパフォーマンスの向上を参照してください。