0

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}) } })
Improve this question

1 Answer 1

Reset to default
0

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.

Improve this answer

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.