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