JavaScript

How to Style HTML Elements in jQuery

Style properties for selected HTML elements are assigned or returned using the jQuery css() method. When it is utilized as a getter function, it returns the property value of the first matched HTML element. You can also use it to set single or multiple CSS properties of all matching elements.

This write-up will discuss the procedure to style HTML elements in jQuery. We will also demonstrate some appropriate examples related to the css() method. So, let’s start!

How to get CSS property of HTML Elements in jQuery

In jQuery, you can get the specified CSS property of the HTML elements by passing the “propertyName” as an argument in the css() method. To do so, you have to follow the below-given syntax:

$(selector).css("propertyName");

You can add a jQuery “selector” for selecting the HTML elements, and the css() method is utilized to retrieve the values of the passed property. 

Example: Getting CSS property of HTML Elements in jQuery
In our “index.html”, we have added a button and three paragraphs elements and set their “background-color” CSS property value:

<p style="background-color:#ff0000">This is 1st paragraph.</p>
<p style="background-color:#706d5a">This is 2nd paragraph.</p>
<p style="background-color:#ee1971">This is 3rd paragraph.</p>
<button>check background</button>

Next, in our JavaScript file which is  named as “myProject.js”, we will write-out the following code:

$(document).ready(function(){
    $("button").click(function(){
        alert("Background color = " + $("p").css("background-color"));
    });
});

When the user clicks the “check background” button, jQuery will search for the “p” or paragraphs and get the “background-color” CSS property of the first matched element. In the end, an alert box will be shown on the browser comprising the property value of “background-color”:

After adding the code in our “index.html”, we will execute it by using the “Liver Server” VS Code extension:

Clicking on the “check background” button will let you know about the background-color CSS property of the first paragraph in an alert box:

How to set CSS property of HTML Elements in jQuery

jQuery css() method also permits you to set the CSS properties of HTML elements. If you want to change the property values of an HTML element, then pass the “propertyName” and “value” as arguments to the css() method. Both of the arguments should be separated by comma:

$(selector).css("propertyName", "value");

Example: Setting CSS property of HTML Elements in jQuery
In this example, we will set the “background-color” CSS property of all of the paragraph elements:

<h2>This is a heading</h2>
<p style="background-color:#cac39b">This is 1st paragraph.</p>
<p style="background-color:#82cc82">This is 2nd paragraph.</p>
<p style="background-color:#acacc8">This is 3rd paragraph.</p>
<p>This is a paragraph.</p>
<button>Set background-color of p</button>

When the user will click the provided button, it will set the background-color of each paragraph element to “yellow”:

$(document).ready(function(){
    $("button").click(function(){
        $("p").css("background-color", "yellow");
    });
});

You can see from the below-given output that the “background-color” CSS property value of the paragraph elements is now changed to “yellow”:

How to set Multiple CSS properties of HTML Elements in jQuery

For setting multiple CSS properties of HTML elements with the css() method, you have to follow the below-given syntax:

css({"propertyname":"value","propertyname":"value",...});

Here, you have to write the properties and their values in a key value object format, separated by commas.

Example: Setting Multiple CSS properties of HTML Elements in jQuery
In this example, we will change the “background-color” and “font-size” for all of the added paragraph elements:

<h2>This is a heading</h2>
<p style="background-color:#cac39b">This is 1st paragraph.</p>
<p style="background-color:#82cc82">This is 2nd paragraph.</p>
<p style="background-color:#acacc8">This is 3rd paragraph.</p>
<p>This is a paragraph.</p>
<button>Set multiple css properties</button>

On “button” click event, jQuery will select the paragraphs element and sets their background-color to “yellow” and font-size to “150%”:

$(document).ready(function(){
    $("button").click(function(){
        $("p").css({"background-color": "yellow", "font-size": "150%"});
    });
});

The above-given output signifies that we have successfully set the specified multiple CSS properties of the selected HTML Elements.

Conclusion

jQuery css() method is utilized for styling or changing the CSS properties of the selected HTML elements. It can be used in various ways, from getting CSS property value to setting single and multiple HTML properties. This write-up discussed the procedure to style HTML elements in jQuery, and we have also demonstrated some appropriate examples related to the css() method.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.