Learning jQuery | #2 | Using .css()

1Comments
Posted by avn8 in Articles on May 5, 2010

Digging a little deeper, we’re going to jump straight into animating elements of a web page, one of jQuery’s primary uses. Let’s start off by making a div:

#aDiv { background-color: #0094ff; width: 400px; height: 400px; }

We now have made a div with the id of “aDiv” and there are a lot of cool plugins and effects you could use to animate the div. But what if you want to edit the background color of the div? Well background color is a CSS property, therefore we should use .css()

$(document).ready(function() {
	$("#aDiv").click(function () {
	$(this).css("background-color","green");
 
	});
	});

Explained:

    When the DOM has fully loaded.
    When aDiv is clicked.
    Make aDiv’s background-color change to green.

You can edit CSS with jQuery! Part 3 will be exploring .animate()!

Demo