There are methods jQuery css() and jQuery attr() by which jquery add style to HTML elements. There are many CSS properties you can set to the HTML element using these methods. You can add single as well as multiple CSS properties using these jQuery add style methods.

Let’s start learning these methods.

jQuery Add style using css()

jQuery add style to the HTML element using css() method. There are two parameters you have to use with this method. The first parameter requires the jQuery selector to specify the id or class of the HTML element and access the element. The second parameter requires property name with its value.

See jQuery css() method to look for syntax.

Add Single Style

Output


This is the answer to add style to HTML element using jQuery CSS method.

The above example adds the color property with red as its value to the HTML paragraph. Click the “Add single Style” button to view the changes made by the CSS method.

Add Multiple Style

Output


This is the answer to add multiple style CSS to HTML element using jQuery CSS method.

The above example add multiple CSS properties by using the css(). You have to specify the multiple CSS properties inside the curly bracket within the css().

note: jQuery css() is not the method to add attributes. But if the HTML element does not have style attribute, css() adds the style attribute and then after adding the CSS properties inside the style attribute.

jQuery Add style using jQuery attr()

jQuery attr() method is used to add attributes to HTML elements. However, you can use this method to add style attributes and CSS properties to HTML elements.

See jQuery attr() method to learn the syntax and see below example for adding attribute using attr().
Add Single Style

Output


This is the answer to add a style attribute to HTML element using jQuery attr() method.

The above example adds a color property to HTML element with red as its value. The method first adds the style attribute to the HTML element then after it adds the CSS property to its values.

Add Multiple Style

Output


This is the answer to add multiple style CSS to HTML element using jQuery attr() method.

The above example adds multiple CSS properties using the attr() method. You can specify the comma(,) separated CSS properties with its value inside the attr method.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.