在 flex 运行时更改选项卡边框颜色

Question

如何在运行时更改选项卡导航器控件中选项卡的边框颜色？我正在尝试使用它的 id "mytab" 访问它并更新它的样式。

this.mytab.setStyle("bordercolor","red");

TabNavigator 有多个选项卡，我必须根据一些逻辑更改几个选项卡的样式。 StyleDeclaration 适用于标签导航器下的所有标签，但是如何使用基于 componentid 的 CSSStyleDeclaration 呢？ 这种方法的唯一不足是不能为单个标签更改样式。

Answer 1

直接在TabNavigator 上设置样式是行不通的。您必须在TabNavigator 上设置tabStyleName 属性，然后创建一个具有相同名称的样式，该样式将应用于您的选项卡。与my answer to your other question策略相同；只需设置 borderColor 样式即可。

---

如果您确实需要在运行时动态设置样式，您可以检索选项卡的CSSStyleDeclaration 并将其设置如下：

  <mx:Style>
    .tabStyle {
      /* define an empty style so there is something to get using getStyleDeclaration */
    }
  </mx:Style>

  <mx:Script>
    <![CDATA[
      protected function changeStyle(event:MouseEvent):void
      {
        var cssStyle:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".tabStyle");
        cssStyle.setStyle("borderColor", "red");
      }
    ]]>
  </mx:Script>

  <mx:TabNavigator id="mytab" width="200" height="200" tabStyleName="tabStyle">
    <mx:Canvas label="apple" width="100%" height="100%">
    </mx:Canvas>
    <mx:Canvas label="orange" width="100%" height="100%">
    </mx:Canvas>
    <mx:Canvas label="banana" width="100%" height="100%">
    </mx:Canvas>
  </mx:TabNavigator>

  <mx:Button x="10" y="218" label="Change Style!" click="changeStyle(event)"/>