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
1
-
1FYI, for most of the custom stuff you see in Aura, LWC does using native functionality. That's one reason why components are smaller and faster than in Aura.sfdcfox– sfdcfox2019-06-07 17:06:59 +00:00Commented Jun 7, 2019 at 17:06
Add a comment
|
1 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
-
1Links can go bad, Renji. Can you copy the relevant answers to the question here?Sebastian Kessel– Sebastian Kessel2019-06-07 15:50:21 +00:00Commented Jun 7, 2019 at 15:50
-
added the code example inlineRenji-xD– Renji-xD2019-06-07 15:55:27 +00:00Commented Jun 7, 2019 at 15:55