jQuery css() example



The jQuery css() function is used to get the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.

Example 1 - Get the background color of a clicked div

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>css demo</title>
    <style>
        div {
            width: 60px;
            height: 60px;
            margin: 5px;
            float: left;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>

<body>

    <span id="result">&nbsp;</span>
    <div style="background-color:blue;"></div>
    <div style="background-color:rgb(15,99,30);"></div>
    <div style="background-color:#123456;"></div>
    <div style="background-color:#f11;"></div>

    <script>
        $("div").click(function() {
            var color = $(this).css("background-color");
            $("#result").html("That div is <span style='color:" +
                color + ";'>" + color + "</span>.");
        });
    </script>

</body>

</html>
Try it Yourself - Copy paste code in Online HTML Editor to see the result

Example 2

Get the width, height, text color, and background color of a clicked div.
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>css demo</title>
    <style>
        div {
            height: 50px;
            margin: 5px;
            padding: 5px;
            float: left;
        }

        #box1 {
            width: 50px;
            color: yellow;
            background-color: blue;
        }

        #box2 {
            width: 80px;
            color: rgb(255, 255, 255);
            background-color: rgb(15, 99, 30);
        }

        #box3 {
            width: 40px;
            color: #fcc;
            background-color: #123456;
        }

        #box4 {
            width: 70px;
            background-color: #f11;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>

<body>

    <p id="result">&nbsp;</p>
    <div id="box1">1</div>
    <div id="box2">2</div>
    <div id="box3">3</div>
    <div id="box4">4</div>

    <script>
        $("div").click(function() {
            var html = ["The clicked div has the following styles:"];

            var styleProps = $(this).css([
                "width", "height", "color", "background-color"
            ]);
            $.each(styleProps, function(prop, value) {
                html.push(prop + ": " + value);
            });

            $("#result").html(html.join("<br>"));
        });
    </script>

</body>

</html>
Try it Yourself - Copy paste code in Online HTML Editor to see the result

Example 3

Change the color of any paragraph to red on mouseover event.
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>css demo</title>
    <style>
        p {
            color: blue;
            width: 200px;
            font-size: 14px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>

<body>

    <p>Just roll the mouse over me.</p>

    <p>Or me to see a color change.</p>

    <script>
        $("p").on("mouseover", function() {
            $(this).css("color", "red");
        });
    </script>

</body>

</html>

Example 4

Highlight a clicked word in the paragraph.
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>css demo</title>
    <style>
        p {
            color: blue;
            font-weight: bold;
            cursor: pointer;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>

<body>

    <p>
        Once upon a time there was a man who lived in a pizza parlor. This man just loved pizza and ate it all the time. He went on to be the happiest man in the world. The end.
    </p>

    <script>
        var words = $("p").first().text().split(/\s+/);
        var text = words.join("</span> <span>");
        $("p").first().html("<span>" + text + "</span>");
        $("span").on("click", function() {
            $(this).css("background-color", "yellow");
        });
    </script>

</body>

</html>

Comments