[SalesForce] $A.util.addClass() and $A.util.removeClass() in Lightning Web Components

Does anyone know of an equivalent to the Aura utility methods for adding/ removing style classes dynamically, or have some other workaround?

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_cb_styles.htm

Best Answer

You can use the standard element classList property for it (see here)

Like:

Template

<template>
    <div>Hello World!</div>
    <lightning-button label="Add" onclick={addClass}></lightning-button>
    <lightning-button label="Remove" onclick={removeClass}></lightning-button>
    <lightning-button label="Toggle" onclick={toggleClass}></lightning-button>
</template>

Controller:

import { LightningElement } from 'lwc';

export default class App extends LightningElement {

    addClass() {
        this.template.querySelector('div').classList.add('red');
    }

    removeClass() {
        this.template.querySelector('div').classList.remove('red');
    }

    toggleClass() {
        this.template.querySelector('div').classList.toggle('red');
    }
}

Example: https://developer.salesforce.com/docs/component-library/tools/playground/b-iFXjvxr/1/edit

Related Topic