Site icon ParallelCodes

JQuery – How to Get, Set and Remove Attribute

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:

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.


Exit mobile version