jQuery Basics for Web Developers: Style Properties

In another article, I discussed using jQuery to manipulate attributes on HTML elements. Included in that article was how to add and remove class names from HTML elements. In this article, we will discuss using jQuery to set or get CSS style properties of HTML elements. jQuery provides several methods for reading and setting CSS values. Let’s dig into some of these methods. The sample code is at the end of the article.

.css()

The .css() method gets or sets the style property for the first matched element. To get the value of the property, we use: .css(<propertyname>). This reads the CSS style value of the provided CSS style property. We can use the following jQuery code to get the value of the color property:

	alert($("#myDiv").css("background-color"));

The result will be:

	rgb(255, 0, 0)

As you can see, it returns the RGB value of the color and not the name. (Click the "Example 1" button on the sample code at the end of the article.)

To set the value of the property, we use: .css(<propertyname>, <value>). You can also specify multiple property/value pairs. First, let’s see how to set a single value. We can use the following jQuery code to change the color to black:

	$("#myDiv").css("background-color", "black");

Now the inside color is black. (Click the "Example 2" button on the sample code at the end of the article.)

What if we want to change multiple properties? We would string together multiple jQuery statements like this:

	$("#myDiv").css("background-color", "black");
	$("#myDiv").css("border-width", "15px");

Or

	$("#myDiv").css("background-color", "black").css("border-width", "15px");

Or we could specify multiple CSS properties together like this:

	$("#myDiv").css( { "background-color": "black", "border-width" : "15px" } );

This is referred to as a property map. The properties are first enclosed in brackets {}. The properties and values are enclosed in quotes and separated with a colon. Each property/value pair is separated with a comma. You can have an almost unlimited number of property/value pairs. Also, on the above example, notice we added a CSS property. CSS properties do not need to exist on the HTML element when setting values. If the property does not exist already, it will be added. (Click the "Example 3" button on the sample code at the end of the article.)

.height()

The .height() method gets or sets the height of the HTML element. To get the height of an HTML element, you would use .height() like below:

	$("#myDiv").height();

This will return the height of the div. (Click the "Example 4" button on the sample code at the end of the article.)

There is a difference between using .height() and .css("height"). The .css("height") returns the value with the unit (i.e. 400px). The "px" is the unit. Using .height() will return the numeric value only. This allows for calculations to be performed. This method will only return the content height only. It does not get the height of the box model (margin, border, and padding are ignored).

If we want to change the height of a HTML element, we can use .height(<value>). The value can any CSS measurement for height, such as, auto, 25%, or 250px. If only a numeric value is specified with no unit, "px" will be added to the value. Let’s say we want to change the height of a DIV, we can use the following:

	$("#myDiv").height(200);

This will change the height of the div to 200px. (Click the "Example 5" button on the sample code at the end of the article.)

.width()

The .width() method gets or sets the width of the HTML element. To get the width of the HTML element, you would use .width() like below:

	$("#myDiv").width();

This will return the width of the div. (Click the "Example 6" button on the sample code at the end of the article.)

Just like .height() above, there is a difference between .width() and .css("width"). It follows the same conventions.

If we want to change the width of a DIV, we can use the following:

	$("#myDiv").width(200);

This will change the width of the div to 200px. (Click the "Example 7" button on the sample code at the end of the article.)

If you want to get the height and the width of the window, you can use .height() and .width() methods (see examples 14 and 15). Only the .height() and .width() methods support getting the values for the window/document element. The other methods will return an error.

.innerHeight()

The .innerHeight() method gets the height of a HTML element and includes the top and bottom padding. This does not include the border and margins. The value is expressed in pixels (px). It will return a numeric value just like the .height() method. To get the inner height use the following:

	$("#myDiv").innerHeight()

This will return the inner height of the div. (Click the "Example 8" button on the sample code at the end of the article.)

.innerWidth()

The .innerWidth() method gets the width of a HTML element and includes the left and right padding. This does not include the border and margins. The value is expressed in pixels (px). It will return a numeric value just like the .width() method. To get the inner width use the following:

	$("#myDiv").innerWidth()

This will return the inner width of the div. (Click the "Example 9" button on the sample code at the end of the article.)

.outerHeight()

The .outerHeight() method gets the height of the HTML element and includes the top and bottom padding and the border. If the argument is set to true, it will also include the top and bottom margins. The value is expressed in pixels (px) and is a numeric value. To get the outer height without the margins, you would use:

	$("#myDiv").outerHeight();

(Click the "Example 10" button on the sample code at the end of the article.)

To get the outer height with the margins, you would use:

	$("#myDiv").outerHeight(true);

(Click the "Example 11" button on the sample code at the end of the article.)

.outerWidth()

The .outerWidth() method gets the width of the HTML element and includes the left and right padding and the border. If the argument is set to true, it will also include the left and right margins. The value is expressed in pixels (px) and is a numeric value. To get the outer width without the margins, you would use:

	$("#myDiv").outerWidth();

(Click the "Example 12" button on the sample code at the end of the article.)

To get the outer width with the margins, you would use:

	$("#myDiv").outerWidth(true);

(Click the "Example 13" button on the sample code at the end of the article.)

Conclusion

As you can see, there are several ways to manipulate HTML objects using jQuery. jQuery provides many opportunities to help style your web pages.

To see this example in action, click here.

	<html> 
		<head>
			<title>Page Title</title>
			<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jquery/jquery-1.4.3.min.js"></script>
			<script type="text/javascript">
				$(document).ready(function () {
					$("#Example1").click(function () {
						alert($("#myDiv").css("background-color"));
					});

					$("#Example2").click(function () {
						$("#myDiv").css("background-color", "black");
					});

					$("#Example3").click(function () {
						$("#myDiv").css({ "background-color": "black", "border-width": "15px" });
					});

					$("#Example4").click(function () {
						alert($("#myDiv").height());
					});

					$("#Example5").click(function () {
						$("#myDiv").height(200);
					});

					$("#Example6").click(function () {
						alert($("#myDiv").width());
					});

					$("#Example7").click(function () {
						$("#myDiv").width(200);
					});

					$("#Example8").click(function () {
						alert($("#myDiv").innerHeight());
					});

					$("#Example9").click(function () {
						alert($("#myDiv").innerWidth());
					});

					$("#Example10").click(function () {
						alert($("#myDiv").outerHeight());
					});

					$("#Example11").click(function () {
						alert($("#myDiv").outerHeight(true));
					});

					$("#Example12").click(function () {
						alert($("#myDiv").outerWidth());
					});

					$("#Example13").click(function () {
						alert($("#myDiv").outerWidth(true));
					});

					$("#Example14").click(function () {
						alert($(window).height());
					});

					$("#Example15").click(function () {
						alert($(window).width());
					});
				});
			</script>
			<style type="text/css">
				#myDiv { background-color: red; border: thick solid blue; height: 100px; width: 100px; padding: 20px; margin: 20px; }
			</style>
		</head> 
		<body>
			<div id="myDiv"></div>
			<p><button id="Example1">Example 1: Get color</button></p>
			<p><button id="Example2">Example 2: Change color</button></p>
			<p><button id="Example3">Example 3: Change color and border size</button></p>
			<p><button id="Example4">Example 4: Get content height</button></p>
			<p><button id="Example5">Example 5: Change the height</button></p>
			<p><button id="Example6">Example 6: Get content width</button></p>
			<p><button id="Example7">Example 7: Change the width width</button></p>
			<p><button id="Example8">Example 8: Get the inner height</button></p>
			<p><button id="Example9">Example 9: Get the inner width</button></p>
			<p><button id="Example10">Example 10: Get the outer height</button></p>
			<p><button id="Example11">Example 11: Get the outer height with margins</button></p>
			<p><button id="Example12">Example 12: Get the outer width</button></p>
			<p><button id="Example13">Example 13: Get the outer width with margins</button></p>
			<p><button id="Example14">Example 14: Get the height of the window</button></p>
			<p><button id="Example15">Example 15: Get the width of the window</button></p>
		</body>
	</html>