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)


    <lightning:input type="color" label="Color" name="color" value="" onchange="{!c.colorChanger}" aura:id="color"/>

Controller :

    colorChanger : function(component, event, helper) {
        var color = component.find("color").get("v.value");
        this.css({"background" : color})

1 Answer 1


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?

<div style="background-color: {!v.color}">

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.