How to define dynamically background color in Lightning

Question

In Lightning is not possible to access CSS Style and modify css properties like background color. In my case I need to change CSS Background color style based on custom record field value.

I am interested in how to implement this on Lightning.

Answer 1

I think you should use inline css - somethink like this:

<aura:attribute type="String" name="colorBackground" default='blue'/> 
<div style="{! 'background-color:' + v.colorBackground }">
     <!-- code -->
</div>

Answer 2

In Lightning components, you can also use html properties and Javascript code.

First, you can define an id to your custom div using:

<div id="test"></div>

Then, you'll be able to modify its background using Javascript:

var myDiv = document.getElementById("test");
myDiv.style.background = "dynamicalValueOfCssBackgroundDerivenFromSObjectFieldValueOrF‌​romSomewhereElse";