如何更改SAPUI5中的css類運行時間

Question

我有一個自定義圖塊。我想添加班級/改變顏色在頂部HBox現在是淺綠色。所以顏色應根據下面所示的分數（紅色，棕色，深綠色或淺綠色）進行。如果分數高於80，它應該是深綠色。我怎樣才能做到這一點。

Answer 1

你可以使用CSS與分配給HBox中控制自定義數據。格式化程序可以幫助根據值爲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');