jQuery Basics for Web Developers: Style Properties

Share this post!

Vote this!

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:

More...