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>
The above code is the opposite of the previous program code example. Here we display the complete box with colors, borders and shadow effects.
Here are the temporary result :
When the Delete Color button is clicked, the following command will be executed :
$("#box").removeClass("add_color");
then the result is as follows :
The result color box will be lost. This is because the background-color: pink property is in the add_color class.
So if we click the Delete Border button, it will run the command :
$("#box").removeClass("add_border");
then the result is as follows :
Lastly, when we click the Delete Shadow button, it will execute the following command :
$("#box").removeClass("add_shadow");
then the result is as follows :
The whole view will be lost and empty.
Your contribution cannot be approved because it does not follow the Utopian Rules.
Violated Rule:
My Opinion:
A tutorial must be informative and explanatory, but also "tutor". This tutorial lacks "tutor"ing, and it is nothing more than an explanation of a documentation.
I don't think showing one or several functions from a programming language and including an example counts as a tutorial. Next time, make it more condensed. At this state, it's full of fillers.
You can contact us on Discord.
[utopian-moderator]