SAPUI5でcssクラスランタイムを変更する方法

Question

私はカスタムタイルを持っています。私はクラスを追加したい/今すぐライトグリーンであるトップHBoxの色を変更します。色は下に示すスコア（赤、茶色、濃い緑色または薄緑色）に従うべきです。スコアが80を超える場合は、暗緑色でなければなりません。どうやってやるの。

Answer 1

を持っている場合は、HBoxのコントロールに割り当てられたカスタムデータとCSSを使用することができます動作します。フォーマッタは、値に基づいてHBoxに適切なクラスを割り当てるのに役立ちます。

XML：

<HBox width="200px" height="150px" backgroundDesign="Solid" > 
     <items> 
      ... 
     </items> 
     <customData> 
      <core:CustomData 
       key="style-class" 
       value="{path:'/props/DLES', formatter:'.formatter.formatStyle'}" 
       writeToDom="true"/> 
     </customData> 
</HBox> 

フォーマッタ：

formatStyle : function(v){ 
     if(v>80){ 
      return "darkgreen"; 
     } 
     else if(v > 60){ 
      return "green" 
     } 
     else if(v > 50){ 
      return "yellow" 
     } 
     else if(v > 40){ 
      return "brown" 
     } 
     else{ 
      return "red" 
     } 
    } 

CSS：

[data-style-class=darkgreen] { 
background-color: #01870e !important 
} 
[data-style-class=green] { 
background-color: #7fc257 !important 
} 
[data-style-class=yellow] { 
background-color: #ffc300 !important 
} 
[data-style-class=brown] { 
background-color: #b73209 !important 
} 
[data-style-class=red] { 
background-color: #e00404!important 
} 

Answer 2

あなたは次のように行うことができます - これは、私たちは、静的ID

$("#hbox_id").toggleClass('change_me newClass');