Lightning Components Developer Guide

What is the Lightning Component Framework?
Quick Start
Creating Components
Using Components
Communicating with Events
Creating Apps
App Overview
Designing App UI
Creating App Templates
Developing Secure Code
Validations for Lightning Component Code
Styling Apps
Using JavaScript
JavaScript Cookbook
Dynamically Creating Components
Detecting Data Changes with Change Handlers
Finding Components by ID
Dynamically Adding Event Handlers To a Component
Dynamically Showing or Hiding Markup
Adding and Removing Styles
Which Button Was Pressed?
Formatting Dates in JavaScript
Using Apex
Lightning Data Service
Lightning Container
Controlling Access
Using Object-Oriented Development
Using the AppCache
Distributing Applications and Components
Debugging
Fixing Performance Warnings
Reference
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Adding and Removing Styles

You can add or remove a CSS style on a component or element during runtime.

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

CSS source

Client-side controller source

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.

Toggling a Class

To toggle a class, use $A.util.toggleClass(cmp, 'class'), which adds or removes the class.

The cmp parameter can be component or a DOM element.

We recommend using a component instead of a DOM element. If the utility function is not used inside afterRender() or rerender(), passing in cmp.getElement() might result in your class not being applied when the components are rerendered. For more information, see Events Fired During the Rendering Lifecycle.

Note

To hide or show markup dynamically, see Dynamically Showing or Hiding Markup.

To conditionally set a class for an array of components, pass in the array to $A.util.toggleClass().