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:
- GET a CSS property from a DOM element
- GET multiple CSS properties from a DOM element
- SET a CSS property on DOM elements
- 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