Adding and Removing Styles

To retrieve the class name on a component, use component.find('myCmp').get('v.class'), where myCmp is the aura:id attribute value.

To append and remove CSS classes from a component or element, use the $A.util.addClass(cmpTarget, 'class') and $A.util.removeClass(cmpTarget, 'class') methods.

Component source

1<aura:component>
2    <div aura:id="changeIt">Change Me!</div><br />
3    <lightning:button onclick="{!c.applyCSS}" label="Add Style" />
4    <lightning:button onclick="{!c.removeCSS}" label="Remove Style" />
5</aura:component>

CSS source

1.THIS.changeMe {
2    background-color:yellow;
3    width:200px;
4}

Client-side controller source

1{
2    applyCSS: function(cmp, event) {
3        var cmpTarget = cmp.find('changeIt');
4        $A.util.addClass(cmpTarget, 'changeMe');
5    },
6    
7    removeCSS: function(cmp, event) {
8        var cmpTarget = cmp.find('changeIt');
9        $A.util.removeClass(cmpTarget, 'changeMe');
10    }
11}

The buttons in this demo are wired to controller actions that append or remove the CSS styles. To append a CSS style to a component, use $A.util.addClass(cmpTarget, 'class'). Similarly, remove the class by using $A.util.removeClass(cmpTarget, 'class') in your controller. cmp.find() locates the component using the local ID, denoted by aura:id="changeIt" in this demo.

1mapClasses: function(arr, cssClass) {
2    for(var cmp in arr) {
3        $A.util.toggleClass(arr[cmp], cssClass);
4    }
5}