Not getting the dynamically added CSS classes using component.find('myCmp').get('v.class') in aura

Question

I am working on a dual stateful button, so I'm adding and removing the 'slds-is-pressed' class in the component controller file on button click.

The logic is working as expected- the button states are explicitly shown as per this link- https://www.lightningdesignsystem.com/components/buttons/#Dual-Stateful-Button.

Now I need to check if the button is currently pressed, so I used the component.find('myCmp').get('v.class') as in this document- https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_cb_styles.htm.

But the 'slds-is-pressed' class is not returned along with the other classes on the button.

Is this expected behavior? Can we not get the dynamically appended classes using the get('v.class') method?

Markup:

<lightning:button label="Button1"
aura:id="statefulBtn1" title="Button1" 
onclick="{! c.handleButtonClick }" 
class="slds-col slds-size_1-of-2
slds-small-size_1-of-2 
slds-large-size_1-of-4
slds-m-vertical_xx-small slds-button 
slds-button_dual-stateful 
slds-button_neutral
slds-p-left_xx-small slds-p-right_xxx-small"/>

<lightning:button label="Button2"
aura:id="statefulBtn2" title="Button2" 
onclick="{! c.handleButtonClick }" 
class="slds-col slds-size_1-of-2
slds-small-size_1-of-2 
slds-large-size_1-of-4
slds-m-vertical_xx-small slds-button 
slds-button_dual-stateful 
slds-button_neutral
slds-p-left_xx-small slds-p-right_xxx-small"/>

Controller:

handleButtonClick : function(component, event, helper) {
    if(event.getSource().getLocalId() == 'statefulBtn1'){
        var cmpTarget = component.find('statefulBtn1');
        $A.util.addClass(cmpTarget, "slds-is-pressed");
        var cmpTarget = component.find('statefulBtn2');
        $A.util.removeClass(cmpTarget, "slds-is-pressed");
        
    }else if(event.getSource().getLocalId() == 'statefulBtn2'){
        var cmpTarget = component.find('statefulBtn2');
        $A.util.addClass(cmpTarget, "slds-is-pressed");
        var cmpTarget = component.find('statefulBtn1');
        $A.util.removeClass(cmpTarget, "slds-is-pressed");
    }
    console.log(component.find('statefulBtn2').get('v.class'));
    /*Returns slds-col slds-size_1-of-2                                                      
        slds-small-size_1-of-2
        slds-large-size_1-of-4
        slds-m-vertical_xx-small                                                           
        slds-button_neutral 
        slds-button slds-button_dual-stateful
        slds-p-left_xx-small
        slds-p-right_xxx-small
    */
  },

Answer 1

The class component attribute and the class HTML attribute are two different things. When you mix $A.util methods with component attributes, they won't be in sync. Instead, you should set the class attribute directly.

var cmpTarget = component.find('statefulBtn2');
var cmpTargetClasses = cmpTarget.get('v.class').split(' ');
// Adding a value
cmpTargetClasses.push('slds-is-pressed');
// Removing a value
cmpTargetClasses.splice(cmpTargetClasses.findIndex('slds-is-pressed'),1);
// Remember to save the attribute back at the end
cmpTarget.set('v.class', cmpTargetClasses');

However, if you just want to know a component has a certain class, you can also use $A.util.hasClass; this method works with classes added or removed by $A.util.addClass, $A.util.removeClass, and $A.util.toggleClass.