How to change CSS with jQuery?

We can add, remove or change CSS property values with jQuery just like we can with JavaScript.

Just change it directly.

Easier to target the element than JavaScript.

$('#ID_name').css('padding', '2%');

Change more than one properties

$('#ID_name').css({
 margin: "2%",
 padding: "10px",
 color: "green"
});

Properties with quotes

We can use CSS rules that have hyphens in them (i.e. font-size) OR we can put them in quotes or camel-case the style rule name.

$('.class_name').css({
 "background-color": "blue",
});

Tweet about it