Using jQuery .attr() method we can manipulate attributes of a HTML DOM element. Using this method we can manipulate element property and its attribute. Properties like:
- id
- class name
- src
- title
In this post we will learn how we can set, get and remove attributes of a DOM element using jQuery.
Set Attribute using .attr():
We will use .attr() method to first get attribute value and after applying a condition we will change its class name accordingly.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JQuery - Get value</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.red
{
color:red;
font-size:20px;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.green {
color: green;
font-size: 25px;
font-family:'Times New Roman', Times, serif;
}
</style>
</head>
<body>
<button id="btnChange">Change Color</button>
<p id="para1" >Today is Thursday</p>
<script>
$('#btnChange').click(() => {
if ($('#para1').attr("class") === "red")
$('#para1').attr("class", "green");
else
$('#para1').attr("class", "red");
}
);
</script>
</body>
</html>
In the above example, the paragraph (para1) will be simple p element without any class attribute defined. When you press the button the class name will be checked and its class will be changed.
Output:
Get Attribute:
In the above example we have checked for the attribute value in the if condition check.
if ($('#para1').attr("class") === "red")
If the attribute named is not set, it will return undefined value or else jQuery will return value in string format with the exception of a few attributes such as value and tabindex.
Remove Attribute:
The .removeAttr('attributeName') method removes the specified attribute name from an element.
$('#para1').removeAttr("class")
This will remove the class attribute from the para1 element.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JQuery - Get value</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.red
{
color:red;
font-size:20px;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.green {
color: green;
font-size: 25px;
font-family:'Times New Roman', Times, serif;
}
</style>
</head>
<body>
<button id="btnChange">Change Color</button>
<button id="btnRemove">Delete Styling</button>
<p id="para1">Today is Thursday</p>
<script>
$('#btnChange').click(() => {
if ($('#para1').attr("class") === "red")
$('#para1').attr("class", "green");
else
$('#para1').attr("class", "red");
}
);
$('#btnRemove').click(() => {
$('#para1').removeAttr("class");
}
);
</script>
</body>
</html>
When you press on the Delete Styling button, the style class from the element para1 will be removed.
.removeClass(“className”) –
The .removeClass method will remove the specified class attribute from an element. This can be useful when a DOM element has multiple class name attribute assigned to it and you want to remove only a specific class from it.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JQuery - Get value</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.red
{
color:red;
}
.green {
color: green;
}
.bold {
font-size: 20px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
</style>
</head>
<body>
<button id="btnChange">Change Color</button>
<button id="btnRemove">Delete Styling</button>
<p id="para1" class="bold">Today is Thursday</p>
<script>
$('#btnChange').click(() => {
if ($('#para1').attr("class") === "red bold")
$('#para1').attr("class", "green bold");
else
$('#para1').attr("class", "red bold");
}
);
$('#btnRemove').click(() => {
$('#para1').removeClass("bold");
}
);
</script>
</body>
</html>
Also see:
HTML showing Notifications using jQuery
jQuery DataTable custom dark theme
Custom CSS designs for jQuery DataTable.