Dynamically change background color using controller on lightning component

Question

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})
    }
})

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.