jQuery CSS
addClass()

Adds one or more classes to the selected elements

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("button").click(function(){

        $("p").addClass("blue");

    });

});

</script>

<style>

.blue {

    color: blue;

                font-size : 24px;

}

</style>

 

</head>

 

<body>

<p id="device">This is a paragraph.</p>

<button>Click Here</button>

</body>

</html>

removeClass()

Removes one or more classes from the selected elements

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("button").click(function(){

        $("p").removeClass("blue");

    });

});

</script>

<style>

.blue {

    color: blue;

                font-size : 24px;

}

</style>

</head>

<body>

<p id="device" class="blue">This is a paragraph.</p>

<button>Click Here</button>

</body>

</html>

toggleClass()

Toggles between adding/removing classes from the selected elements

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("button").click(function(){

        $("p").toggleClass("blue");

    });

});

</script>

<style>

.blue {

    color: blue;

                font-size : 24px;

}

</style>

 

</head>

 

<body>

<p id="device" class="blue">This is a paragraph.</p>

<button>Click Here</button>

</body>

</html>

 

css()

To return css style attribute of the HTML elements

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("#button1").click(function(){

                        alert($("p").css("background-color"));

                });

});

</script>

</head>

 

<body>

<p style="background-color:#ff0000">This is a paragraph.</p>

<button id="button1">Click Here</button>

</body>

</html>

css()

 To add css style attribute to the HTML elements

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("#button1").click(function(){

                       $("p").css("background-color", "yellow");

                });

});

</script>

</head>

 

<body>

<p style="background-color:#ff0000">This is a paragraph.</p>

<button id="button1">Click Here</button>

</body>

</html>


Previous
Next