jQuery Get and Set CSS Properties
Hello Artisans, today we'll discuss about how to get or set style properties using jQuery. Let's get started
Table of Contents
- jQuery css() Method
- Get a CSS Property Value
- Set a Single CSS Property and Value
- Set Multiple CSS Properties and Values
jQuery css() Method
The jQuery css() method is used to get the computed value of a CSS property or set one or more CSS properties for the selected elements. The computed value of a CSS property is computed from the specified values during the cascade. It typically involves the process of converting relative values such as 'em' and 'ex' to pixel or absolute lengths; for example, if an element has specified values
margin:2em, then the computed value of margin is
24px (double the font size).
This method provides a quick way to apply the styles directly to the HTML elements (i.e. inline styles) that haven't been or can't easily be defined in a stylesheet.
Get a CSS Property Value
You can get the computed value of an element's CSS property by simply passing the property name as a parameter to the
css() method. Here's the basic syntax:
jQuery css() Demo
The computed background-color property value of the clicked DIV element is:
Preview may take a few seconds to load.
Below you will find some common used markdown syntax. For a deeper dive in Markdown check out this Cheat Sheet
Bold & Italic
Bold **double asterisks**
Three back ticks and then enter your code blocks here.
# This is a Heading 1
## This is a Heading 2
### This is a Heading 3
> type a greater than sign and start typing your quote.
You can add links by adding text inside of  and the link inside of (), like so:
To add a numbered list you can simply start with a number and a ., like so:
1. The first item in my list
For an unordered list, you can add a dash -, like so:
- The start of my list
You can add images by selecting the image icon, which will upload and add an image to the editor, or you can manually add the image by adding an exclamation !, followed by the alt text inside of , and the image URL inside of (), like so:
To add a divider you can add three dashes or three asterisks:
--- or ***