jQuery Tutorials part 8

Applying CSS using jQuery


<<<< jQuery Tutorial part 7

   jQuery offers nice functions to work with css to read and set the css properties for page elements easily.

.css( propertyName )

    Gets the value of a css style property for the first matched element.

Sample program to get the css property called ‘background-color’ for a div tag

	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head>
	  <style>
	   div { width:50px; height:50px; margin:10px; float:left; }
	  </style>
	  <script src="jquery-1.7.1.js"></script>
	</head>
	<body>


	<div style="background-color:blue;"></div>

	<script>
	$("div").click(function () {
		 alert($(this).css("background-color"));  
	});

	</script>

	</body>
	</html>

css ( propertyName, value )

   This method is used to set one or more CSS properties for the set of matched elements.

A sample program to set the css property called ‘background-color’ to red on click of div tag

	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head>
	  <style>
	   div { width:50px; height:50px; margin:10px; float:left; }
	  </style>
	  <script src="jquery-1.7.1.js"></script>
	</head>
	<body>


	<div style="background-color:blue;"></div>

	<script>
	$("div").click(function () {
		 alert($(this).css("background-color"));  
		 $(this).css("background-color","red");
	});

	</script>

	</body>
	</html>


>>>>JQuery Tutorials Part9

Thanks for reading my post. please do not hesitate to post your comments or ask any questions below ( or even you find any mistakes too :-) )


  1. hmmm, I cant make it workThere is no save for web and deevcis in GIMP so I just saved it as an jpg, is the problem???

Leave a Comment