function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Jake JeonJake Jeon 

Dynamically change background color using controller on lightning controller

Hi all,

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.
Please advise me if you have any idea to solve this.

Thanks for your help in advance.

Component : 
<aura:component>
<div>
        <lightning:input type="color" label="Color" name="color" value="" onchange="{!c.colorChanger}" aura:id="color"/>
</div>
</aura:component>
Controller : 
({
	colorChanger : function(component, event, helper) {
		var color = component.find("color").get("v.value");
        this.css({"background" : color})
    }
})
*tried this.style.background = color;
 
Best Answer chosen by Jake Jeon
Naveen KNNaveen KN
Hi Jake, 

Please find the tested code to change the background of any div in the component. 

Component code: 
<aura:component implements="flexipage:availableForAllPageTypes">
    <div aura:id='customDiv' class="slds-grid slds-gutters" style="width:200px; height:200px;" >
    </div>
    <div class="slds-m-top_large">
        <lightning:button label='Red' onclick="{!c.changeToRedColor}" class='slds-button slds-button_brand'/>
        <lightning:button label='Yellow' onclick="{!c.changeToYellowColor}" class='slds-button slds-button_brand'/>
    </div>
</aura:component>

Controller js code: 
({
    changeToRedColor : function(component, event, helper) {
        var elem = component.find('customDiv');
        $A.util.removeClass(elem, 'clrYellow');
        $A.util.addClass(elem, 'clrRed');
    },
    changeToYellowColor : function(component, event, helper) {
        var elem = component.find('customDiv');
        $A.util.removeClass(elem, 'clrRed');
        $A.util.addClass(elem, 'clrYellow');
    },
})

Style code: 
.THIS.clrRed {
    background-color:red;
}

.THIS.clrYellow {
    background-color:yellow;
}

Output:
User-added image

Naveen
Team codengine.in

All Answers

Naveen KNNaveen KN
Hi Jake, 

Please find the tested code to change the background of any div in the component. 

Component code: 
<aura:component implements="flexipage:availableForAllPageTypes">
    <div aura:id='customDiv' class="slds-grid slds-gutters" style="width:200px; height:200px;" >
    </div>
    <div class="slds-m-top_large">
        <lightning:button label='Red' onclick="{!c.changeToRedColor}" class='slds-button slds-button_brand'/>
        <lightning:button label='Yellow' onclick="{!c.changeToYellowColor}" class='slds-button slds-button_brand'/>
    </div>
</aura:component>

Controller js code: 
({
    changeToRedColor : function(component, event, helper) {
        var elem = component.find('customDiv');
        $A.util.removeClass(elem, 'clrYellow');
        $A.util.addClass(elem, 'clrRed');
    },
    changeToYellowColor : function(component, event, helper) {
        var elem = component.find('customDiv');
        $A.util.removeClass(elem, 'clrRed');
        $A.util.addClass(elem, 'clrYellow');
    },
})

Style code: 
.THIS.clrRed {
    background-color:red;
}

.THIS.clrYellow {
    background-color:yellow;
}

Output:
User-added image

Naveen
Team codengine.in
This was selected as the best answer
Jake JeonJake Jeon
Hi Naveen,
Thanks for your reply!

I understand that using $.util make component change their class to give a variation of CSS.
In my case, I would like to give them changes directly using javascript like document.getElementById('id1').style.color = 'red' 

My scenario is the same as below :
Use color picker choose the color, using onchange attribute send a color code to the controller and directly give it background-color changes.
 
Naveen KNNaveen KN
Hi Jake, I have tried the options directly to set the color, no luck. Not sure whether element.style.color supports in the salesforce lightning framework. I feel to create different classes for different styles and add the class to the element based on your requirement. 

Naveen