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>
    div{
        width: 100px;
        height: 100px;        
        display: inline-block;
        margin: 10px;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(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 the clicked 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 blue, when it is clicked.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery css() Demo</title>
<style>
    .box{
        width: 100px;
        height: 100px;
        display: inline-block;        
        border: 1px solid #cdcdcd;
        margin: 10px;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $(".box").click(function(){
        $(this).css("background-color", "blue");
    });    
});
</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>
    p{
        font-size: 18px;
        font-family: Arial, sans-serif;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(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>
Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties