Question

How do you apply CSS styles dynamically using jQuery?

I’m working with jQuery and I need to apply CSS styles dynamically to elements on my webpage. I know that CSS classes can be toggled, but I’m also curious about directly setting styles through jQuery. How can I apply inline CSS styles dynamically using jQuery? Are there any best practices or performance considerations I should be aware of when doing this? Code examples would really help!

Answer 1

You can use jQuery’s css() method to add new CSS properties to an item or change the values of existing properties dynamically using jQuery.

Set a single CSS property:

$('#myDiv').css('background-color', 'yellow');

Set multiple CSS properties:

$('#myDiv').css({

    'background-color': 'red',

    'width': '400px'

});

Add or remove a CSS class:

Add a class:

$('#myDiv').addClass('highlight');

Remove a class:

$('#myDiv').removeClass('highlight');

Toggle a CSS class:

$('#myDiv').toggleClass('active');