Best practice for jquery and CSS "Change the CSS of an Element Using jQuery"

[uniOpifex]

Im on the :Change the CSS of an Element Using jQuery

And was wondering if its a good practice to change your styling this way or just in specific situations?

[owel]

There are certain situations where you have to do it this way. (not sure about changing css color, but for a valid example, you may have a need to change the CSS width, height, top, left, right, bottom position of a div element… depending on the results of some on-the-fly calculation… like based/depending on the user’s browser width/height… or if the user resized their browser, and you want to keep certain div elements in a specific location in relation to the browser width/height.

For real world example, check this out. https://randomquote-owel.surge.sh/

Now try resizing your browser width… notice the bottom dockbar div always stay at the bottom of the browser regardless of the size of your browser?

Or how the 3 icons on the right margin always stay in their place even as you vary the width of your browser?

Or the Random Quote window snaps to center when you resize your browser?

[lionel-rowe]

@OP: No, it would never be good practice to change CSS exactly like in the example. However, there are plenty of situations where it’d be useful to change the color of an element using jQuery’s .css() function. The difference is that the use cases would be event-triggered. For example, you could have an onscreen keyboard that changes the color of each key when it’s pressed.

@owel

Now try resizing your browser width… notice the bottom dockbar div always stay at the bottom of the browser regardless of the size of your browser?

Or how the 3 icons on the right margin always stay in their place even as you vary the width of your browser?

Or the Random Quote window snaps to center when you resize your browser?

Damn, that’s a nice project showcase you have there!

Though you could actually do the dockbar without js (see this example). I believe there’s also a way to do it with flexbox.

The snap on resize for the other two definitely requires js, though.

[owel]

@lionel-rowe

Damn, that’s a nice project showcase you have there!

Though you could actually do the dockbar without js (see this example). I believe there’s also a way to do it with flexbox.

The snap on resize for the other two definitely requires js, though.

Hey, Thanks. I appreciate it!

I’ll check out flexbox. But I’m also either left aligning or centering the dockbar horizontally depending on browser width… in addition to sticking/relocating it at the bottom.