JQUERY BASIC
JQUERY EFFECTS
JQUERY MANIPULATION
JQUERY ADVANCED
JQUERY EXAMPLES
JQUERY REFERENCE

jQuery Get and Set CSS Properties

In this tutorial you will learn how to get or set style properties using jQuery.

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.

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");

The 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>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>jQuery css() Demo</title>
  • <style type="text/css">
  •     div{
  •         width: 100px;
  •         height: 100px;
  •         margin: 10px;
  •         cursor: pointer;
  •         display: inline-block;
  •     }        
  • </style>
  • <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $("div").click(function(){
  •         var color = $(this).css("background-color");
  •         $("#result").html(color);
  •     });    
  • });
  • </script>
  • </head>
  • <body>
  •     <div style="background-color:orange;"></div>
  •     <div style="background-color:#ee82ee;"></div>
  •     <div style="background-color:rgb(139,205,50);"></div>
  •     <div style="background-color:#f00;"></div>
  •     <p>The computed background-color property value of this DIV element is: <b id="result"></b></p>
  • </body>
  • </html>

Set a Single CSS Property and Value

The css() method can take a property name and value as separate parameters for setting a single CSS property for the elements. The basic syntax can be given with:

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

The following example will set the CSS background-color property of the <div> elements, to the color value red, when it is clicked.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>jQuery css() Demo</title>
  • <style type="text/css">
  •     .box{
  •         width: 100px;
  •         height: 100px;
  •         margin: 10px;
  •         cursor: pointer;
  •         border: 1px solid #cdcdcd;
  •         display: inline-block;
  •     }        
  • </style>
  • <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $(".box").click(function(){
  •         $(this).css("background-color", "red");
  •     });    
  • });
  • </script>
  • </head>
  • <body>
  •     <div class="box"></div>
  •     <div class="box"></div>
  •     <div class="box"></div>
  •     <div class="box"></div>
  • </body>
  • </html>

Set Multiple CSS Properties and Values

You can also set multiple CSS properties with the css() method. The basic syntax for setting the more than one property for the elements can be given with:

$(selector).css({"propertyName":"value", "propertyName":"value", ...});

The following example will set the background-color as well as the padding CSS property for the selected elements at the same time.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>jQuery css() Demo</title>
  • <style type="text/css">
  •     p{
  •         font-size: 18px;
  •         font-family: Arial, sans-serif;
  •     }
  • </style>
  • <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $("button").click(function(){
  •         $("p").css({"background-color": "yellow", "padding": "20px"});
  •     });    
  • });
  • </script>
  • </head>
  • <body>
  •     <h1>This is a heading</h1>
  •     <p style="background-color:orange;">This a paragraph.</p>
  •     <p style="background-color:#ee82ee;">This is another paragraph.</p>
  •     <p style="background-color:rgb(139,205,50);">This is none more paragraph.</p>
  •     <p>This is one last paragraph.</p>
  •     <button type="button">Add CSS Styles</button>
  • </body>
  • </html>

Your Feedback:

We would love to hear from you, please drop us a line.