Home >> jquery >> jQuery Style Properties

jQuery Style Properties

Welcome to another tutorial, here you will learn how to get or set style properties using jQuery.

jQuery css() Method

The css() method in jQuery is used to get the computed value of a CSS property or to set one or more CSS properties for the selected elements.

The css() method provides a quick way to apply the styles directly to the HTML elements (or inline styles) that are yet to be cannot be easily defined in a stylesheet.

Get a CSS Property Value

The computed value of the CSS property of an element by just passing the property name as a parameter to the css() method. The basic syntax is shown below:

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

The example below shows how to retrieve and display the computed value of the CSS background-color property of an <div> element if it is clicked.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get the Value of a CSS Property</title>
<style>
    div{
        width: 100px;
        height: 100px;
        margin: 10px;
        cursor: pointer;
        display: inline-block;
    }        
</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 this DIV element is: <b id="result"></b></p>
</body>
</html>

Set a Single CSS Property and Value

The css() method has the ability to take property name and value as separate parameters in setting a single CSS property for the elements.

Below is the basic syntax:

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

The example below shows how to set the CSS background-color property of the <div> elements, to the color value blue if it is clicked.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Set the Value of a CSS Property</title>
<style>
    .box{
        width: 100px;
        height: 100px;
        margin: 10px;
        cursor: pointer;
        border: 1px solid #cdcdcd;
        display: inline-block;
    }        
</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>
	<p><strong>Note:</strong> Click inside the empty box to fill the background color.</p>
</body>
</html>

Set Multiple CSS Properties and Values

In jQuery you can set multiple CSS properties with the css() method. Below is the basic syntax used in setting more than one property for the elements:

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

The example below shows how you will set the background color and the padding CSS property for the selected elements at the same time.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Set the Values of Multiple CSS Properties</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>

-Advertisement-