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 : document.getElementById("id").style.background = "blue";)

Please advise me if you have any idea to solve this.

Thanks for your help in advance.

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

})

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