I would like to implement component having a background color change feature.
I tried to get some information on how to change CSS using Lightning Component controller, I couldn't get much about it.
Understand that using $A.util change or delete their class, but have no idea when I want to give them style changes directly
(like vanilla javascript e.g : 1document.getElementById("id").style.background = "blue";1)
Component:
<aura:component>
<lightning:input type="color" label="Color" name="color" value="" onchange="{!c.colorChanger}" aura:id="color"/>
</aura:component>
Controller :
({
colorChanger : function(component, event, helper) {
var color = component.find("color").get("v.value");
this.css({"background" : color})
}
})
Best Answer
Are you trying to change the OOTB background? Although possible, you will most likely find difficulty in doing that. Have you tried using a Modal and change its background from there? Or place your elements inside a
div
and add a styling to it?this is the wisest way of changing a background color dynamically. But If you really want to change the OOTB background color then I suggest looping through elements by class name to find the class for the background - then override the css by
document.getElementsByClassName("backgroundClass")[index].style.color = "{!v.color}";
But like what I said, although possible, you will find difficulty in doing this in javascript.