jQuery Get and Set CSS Properties

Published on Jul 08, 2022

Hello Artisans, today we'll discuss about how to get or set style properties using jQuery. Let's get started

Table of Contents

  1. jQuery css() Method
  2. Get a CSS Property Value
  3. Set a Single CSS Property and Value
  4. 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 font-size:12px and 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:

$(selector).css("propertyName");

he following example will retrieve and display the computed value of the CSS background-color property of a <div> element, when it is clicked.

<!doctype html>




jQuery css() Demo





    

The computed background-color property value of the clicked DIV element is:

Comments (0)