JQuery guide for beginner’s part 3 – Manipulating and applying CSS Styles | Lessoncup Programming Blog

Sunday, 27 October 2013

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’);

});

No comments :

Post a Comment

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons