Dynamically changing Lightning components style

Question

We have a use case where we can only resize parts of the DOM dynamically in Javascript (stylesheets won't work in this case).

What are the best practices with respect to these use cases? Retrieving a simple node by aura ID like so

cmp.find('myNode')

will return a Proxy over the nodes. Shall we use JQuery or does the Lightning Stack contains library functions for these use cases?

Answer 1

I also had the same issue. I wanted to change the styles of a div dynamically but i wanted to change its height so couldnt use classes.

I ended up doing it old school

var el = document.getElementById('elementClassId');
el.style.height = newHeight + 'px';

This worked perfectly for my use case. This code went in the controller of my aura component.

Answer 2

Yes, there did exist some library functions for these use cases. Something like this. addClass/removeClass/hasClass/toggleClass

    //find a component with aura:id="myCmp" in markup
    var myCmp = component.find("myCmp");
    $A.util.hasClass(myCmp, "myClass");

You can find them in the Util class

Hope it can help.