JQuery guide for beginner’s part 3 – Manipulating and applying CSS Styles

HI, in previous lesson we seen about jquery selectors today we are going to work with CSS, we can easily write and manage the css styles to html elements using jquery and it’s done in a cross-browser, here I am going to show some examples to demonstrate this.

JQuery Writing CSS using .css() method. 

$(document).ready(function(){

 $(‘p’).css(‘width’, ‘400px’);

 $(‘.p’).css(‘width’, ‘400px’);

 $(‘#p’).css(‘width’, ‘400px’);

});

JQuery Applying CSS using .addClass() method.

The addClass() method updates the class attribute with a new class including any classes that were already set.

$(document).ready(function(){

$(‘.button’).addClass(‘link’);

});

JQuery Removing CSS using .removeClass() method.

The remoceClass() method removes the class attribute while keeping any classes that were already set. 

$(document).ready(function(){

$(‘.button’).removeClass(‘link’);

});