jQuery Get and Set CSS Properties

The css() function of jQuery is used to retrieve the calculated value of a CSS property or to set one or more CSS values for the specified components.

This approach provides a simple way to apply styles directly to HTML components that haven't been or can't readily be defined in a stylesheet (i.e. inline styles).

Get a CSS Property Value

Simply giving the property name as an argument to the css() function will return the calculated value of an element's CSS property. The fundamental syntax is as follows:

Syntax

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

When a <div> element is clicked, the following example will fetch and show the calculated value of its CSS background-color property.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <style>
        .box{
            width: 50px;
            height: 50px;
            background-color: #00ab55;
        }
    </style>
</head>
<body>

<h1>Get the Value of a CSS Property</h1>
<button class="btnGet">Click me</button><br><br>
<div class="box"></div>
<p id="result"></p>

<script>
    $(document).ready(function(){
        $(".btnGet").click(function(){
            let BGColor = $(".box").css("background-color");
            $("#result").html(BGColor);
        });
    });
</script>
</body>
</html>

Preview

Set a Single CSS Property and Value

For establishing a single CSS property for the elements, the css() function can take a property name and value as distinct arguments. The fundamental syntax is as follows:

Syntax

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

When the button is clicked, the CSS background-color property of the <div> elements is set to the color value blue.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <style>
        .box{
            width: 50px;
            height: 50px;
            border: 1px solid #eee;
        }
    </style>
</head>
<body>

<h1>Set the Value of a CSS Property</h1>
<button class="btnSet">Click me</button><br><br>
<div class="box"></div>

<script>
    $(document).ready(function(){
        $(".btnSet").click(function(){
            $(".box").css("background-color", "#ff4842");
        });
    });
</script>
</body>
</html>

Preview

Set Multiple CSS Properties and Values

The css() function can also be used to set numerous CSS properties. The fundamental syntax for setting multiple properties for elements is as follows:

Syntax

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

The following example will simultaneously set the background-color and padding CSS properties for the chosen items.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<style>
    .box{
        width: 50px;
        height: 50px;
        border: 1px solid #eee;
    }
</style>
<body>

<h1>Set the Values of Multiple CSS Properties</h1>
<button class="btnSet">Click me</button><br><br>
<div class="box"></div>

<script>
    $(document).ready(function(){
        $(".btnSet").click(function(){
            $(".box").css({"background-color": "#ffc107", "width": "100%"});
        });
    });
</script>
</body>
</html>

Preview

jQuery CSS Class

jQuery Dimensions

jQuery Get and Set CSS Properties

Get a CSS Property Value

Syntax

Example

Set a Single CSS Property and Value

Syntax

Example

Set Multiple CSS Properties and Values

Syntax

Example

Links

Tutorials

Connect with us