jquery
  1. jquery-css
PreviousNext

In this example, clicking the "Change Color" button calls the CSS() method to change the background-color of the <div> element to blue. This demonstrates how the CSS() method can be used to change the styling of elements dynamically on a webpage.

Summary

The CSS() method in jQuery provides a simple and effective way to manipulate CSS properties of HTML elements on a webpage. By using this method, you can change various styles of elements dynamically, adding interactivity and animation to your web project.

JQuery CSS()

The CSS() method in jQuery is used to get or set CSS properties for an element on a webpage.

Syntax

Here is the basic syntax for using CSS() method in jQuery:

$(selector).css(property, value);

Where selector is the query selector used to select the element, property is the CSS property you want to get or set, and value is the new value for the CSS property if setting a new value.

Use

The CSS() method is useful for manipulating CSS properties of HTML elements on a webpage. This method can be used to dynamically change the styling of a webpage based on user interactions. It can also be used to create animation effects or to set the dimensions and positioning of elements on a webpage.

Example

Here is an example of using CSS() method in jQuery to change the background color of a <div> element:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JQuery CSS() Example</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("button").click(function(){
                    $("div").css("background-color", "blue");
                });
            });
        </script>
        <style>
            div {
                width: 200px;
                height: 200px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <button>Change Color</button>
        <div></div>
    </body>
</html>
Try Playground
val()before()
Published on: