Select Page

How to change CSS using jQuery?

Published: July 12, 2022

The jQuery .css method is used to GET or SET DOM element CSS properties.

The following tutorial will demonstrate 4 core concepts of jQuery’s .css method:

  1. GET a CSS property from a DOM element
  2. GET multiple CSS properties from a DOM element
  3. SET a CSS property on DOM elements
  4. SET multiple CSS properties on DOM elements

When looking to GET a CSS property with jQuery’s .css method, jQuery will return the first matched element’s CSS properties. So, you will want to pay close attention to the jQuery selector used when requesting a CSS property. If you pass a class into the selector and a group of elements gets returned, jQuery’s .css method will only show CSS properties for the first matched element in the group of matched elements.

Let’s start by taking a look at using jQuery’s .css method to GET a CSS property from a DOM element with a class of box. In this first example, let’s create a <div> with a solid background color.