How jQuery Change CSS Property of HTML element

Last Updated on June 20, 2021 by Roshan Parihar

In this tutorial, learn how jQuery change the CSS property of the HTML element. The short answer is to use the css() method that requires two arguments to pass.

You can change single as well as multiple CSS properties of HTML element using the css(). Let’s find out with the examples given below here.

How to Change Single CSS Property in jQuery

Syntax: Change Single CSS Property

The selector parameter requires ids or class names of the HTML element you want to change CSS. There are two arguments passed inside the css(). The first parameter requires the property name and the second parameter requires the value of the relevant property.

See the example below to learn the method.

Output


This is the paragraph to change CSS Property.

You can click the above button to change the single CSS property of the paragraph element.

Change Multiple CSS Properties

To change multiple CSS properties, you have to use the syntax given below that uses the css().

Syntax: Change Multiple CSS Property

You can specify multiple CSS properties with their values inside the css() function within the curly bracket.

See the example below to change multiple CSS properties.

Output


This is the paragraph to change CSS Property.

The above example contains the button that you have to click to change multiple CSS properties.

You May Also Like to Read

Resource
jQuery css() API