Changing the CSS Class of HTML Elements with jQuery

What is the Purpose of This Tutorial?

How to change CSS Class of HTML Elements with jQuery

Requirements

Must know about HTML, CSS, and Javascript
jQuery (.js file), you can download it in this link https://jquery.com/download/

Difficulty

Basic

Introduction

jQuery is a fast, small and feature-rich JavaScript library included in a single .js file. jQuery makes a web developer's life easy. It provides many built-in functions using which you can accomplish various tasks easily and quickly. jQuery's change methods allow you to alter the Document Object Model of your page using a syntax that's much friendlier than the one provided by native DOM of changing methods. Change methods return the jQuery object on which they were called, which means you can chain them or combine them with other jQuery methods.

So, let's get started to practice it.

Add Class CSS with jQuery

jQuery provides the addClass() method to add a new CSS class to the current HTML element. For example, suppose we have an HTML tag :

div id="box" class="one"></div>

If we run the code :

$("#box").addClass("two");

The result will be :

<div id="box" class="one two"></div>

Note in the class attribute, it has been added 1 more CSS class. In order to see the changes, of course we have prepared the CSS code for class one and class two.

To put it into practice, note the following program code :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery by simpleawesome</title>
<script src="jquery.js"></script>
<script>
   $(document).ready(function() {
     $("#adding_color").click(function() {
       $("#box").addClass("add_color");
     })
     $("#adding_border").click(function() {
       $("#box").addClass("add_border");
     })
     $("#adding_shadow").click(function() {
       $("#box").addClass("add_shadow");
     })
   });
   </script>
   <style>
   #box {
     width: 300px;
     height: 80px;
   }
   .add_color {
     background-color: pink;
   }
   .add_border {
     border: 2px solid black;
   }
   .add_shadow {
     box-shadow: 7px 7px silver;
   }
   </style>
</head>
<body>
<div id="box"></div>
<br>
<button id="adding_color">Add Color</button>
<button id="adding_border">Add Border</button>
<button id="adding_shadow">Add Shadow</button>
</body>
</html>

Here are the temporary result :

If we run the above code, will appear 3 pieces of the button: Add Color, Add Border and Add Shadow. Above these three buttons there is actually a <div> tag with a width of 300px and a height of 80px. Because it is not colored, this box is not visible.

In the CSS code, we prepare 3 class selector, ie .add_color, .add_border and .add_shadow. These three selectors have different properties.
When the Add Color button is clicked, the following jQuery code will run :

$("#box").addClass("add_color");

That is, add a CSS class with the name "add_color" into the HTML tags that have id="#box". So the tag <div id="#box"> will change to :

<div class="add_color" id="box"></div>

Here are the following results for color addition :

The second button, Add Border will run the jQuery code :

$("#box").addClass("add_border");

As a result, the box will have a black frame. In accordance with the contents of the CSS property in the class sector .add_border :

The third button, Add Shadow will run the jQuery code :

 $("#box").addClass("add_shadow");

The Add Shadow button will add a class .add_shadow, so the box will have a shadow effect from the CSS3 shadow-box property: box-shadow: 7px 7px silver :

Because inside the selector .add_color we have written the background-color: pink property, box directly pink. The effect of this addition will be easy to see if we enable the Web Developer Tools feature of the web browser, as shown below :

Removing the CSS Class with jQuery

If jQuery provides the addClass() method to add CSS classes, there is also a removeClass() method that can be used to remove CSS classes. For example, if inside HTML code we have the following tag :

<div id="box" class="one two three"></div>

So when we run the code :

$("#box").removeClass("three");

Class three will be removed from the HTML code, to be :

<div id="box" class="one two"></div>

Here's the practice of using the removeClass method to remove CSS classes with jQuery :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery by simpleawesome</title>
<script src="jquery.js"></script>
<script>
   $(document).ready(function() {
     $("#delete_color").click(function() {
       $("#box").removeClass("add_color");
     })
     $("#delete_border").click(function() {
       $("#box").removeClass("add_border");
     })
     $("#delete_shadow").click(function() {
       $("#box").removeClass("add_shadow");
     })
   });
   </script>
   <style>
   #box {
     width: 300px;
     height: 80px;
   }
   .add_color {
     background-color: pink;
   }
   .add_border {
     border: 2px solid black;
   }
   .add_shadow {
     box-shadow: 7px 7px silver;
   }
   </style>
</head>
<body>
<div id="box" class="add_color add_border add_shadow"></div>
<br>
<button id="delete_color">Delete Color</button>
<button id="delete_border">Delete Border</button>
<button id="delete_shadow">Delete Shadow</button>
</body>
</html>