How to Add and Remove CSS using jQuery

Submitted by nurhodelta_17 on Monday, April 9, 2018 - 21:26.

Getting Started

First, we need the jQuery library. I've included the file in the downloadable of this tutorial, but if you want, you can get jQuery using this link.

Displaying our Element

Next, we display the element that we want to add and remove CSS. Create a new file, name it as index.html and paste the codes below.

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>How to Add and Remove CSS using jQuery</title>
</head>
<body>
<div id="myDiv">
        <p>Add CSS to Me</p>
</div>
<button type="button" id="myBtn">Add Class</button>
 
<script src="jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>

Creating our jQuery Script

Lastly, we create our jquery script that contains our add and remove css code. Create a new file, name it as app.js and paste the codes below.

$(document).ready(function(){
        $('#myBtn').click(function(e){
                var text = $(this).html();
                if(text == 'Add Class'){
                        //Add CSS to our Div
                        $('#myDiv').css('color', 'blue');
                        //Change the display in our button
                        $(this).html('Remove Class');
                }
                else{
                        //remove our css
                        $('#myDiv').css('color', '');
                        //Change the display in our button
                        $(this).html('Add Class');
                }
        });
});

That ends this tutorial. Happy Coding :) P.S. In case that you have a predefined CSS in a class and wanted to add it to an element, please refer to my tutorial, How to Add Class to a Div using JQuery.

Add new comment

78 views