How to programmatically set the background color of a UI5 panel?

[Kevin_Hunter]

Hi All,

Is there a way of programmatically change the background color of a SAPUI5 panel ?

I know how to do it using the addStyleClass but this restricts me to using predefined colors in my custom CSS, I need the ability to set ANY color on the fly.

Is it possible to create a new Style Class programmatically and then addit using the addStyleClass ? The panel only contains a simple sap.m.text field, should I use a different container instead of the panel?

Thanks

Kevin

[FlorianVogt · Accepted solution]

Hi Kevin,
I would not recommend to create style classes dynamically. It is quite hard to maintain. Think about debugging on such a highly dynamic setup. Hard work. From my point of view style classes are meant to be declarative and should be immutable.
If the number of possible colours are less (<10), I would create custom style classes in your custom css and then assign them via setStyleClass.
If not I would go with Jun's approach by using document.getElementById() and then set the css color directly.

var div = document.getElementById("mydiv");
div.style.color = "blue";

[Kevin_Hunter · Accepted solution]

Thanks both.

Agreed I didn't want to go the style class route but I had tried various methods of manipulating the DOM but they didnt work so I was starting to think I may be forced in that direction. However ! i just tried it again using a variation of your code and it worked, i am not a developer but trying to learn as much as I can so thank to both of you for your advise.

var panelid = this.getView().byId("panelPlugin").sId;

var div = document.getElementById(panelid);

div.style.backgroundColor = "red";

[FlorianVogt · Accepted solution]

Hi Kevin,
when you writing these statements you're a developer 🙂 Congratulations!
A small hint from my side. Do not use the sId property. Just use the getId method.
Best Regards,
Florian

[junwu]

I think you can use javascript to manipulate the dom object directly