如何更改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');