How to set background color in the salesforce lightning component - using $A.util.addClass | $A.util.removeClass | Salesforce lightning tutorials

In this article, we have shared sample code to set or change the background color of any element within the aura lightning 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 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 bundle code:

.THIS.clrRed {

    background-color:red;

}

.THIS.clrYellow {

    background-color:yellow;

}

Result:

Add your queries or feedback in the comments section below.

You may also like

Howto export knowledge articles in Salesforce lightning

Salesforce lightning interview questions - Part 1

Salesforce lightning interview questions - Part 2