Jquery Set custom data attribute value | Jquery Get custom data attribute value
In this example, we will learn how to get custom attribute value in jquery and how to set custom attribute value in jquery. we will use attr() and data() for getting custom attribute value and set custom attribute value in js.
We can easily set data attribute value in jquery, also you can do it same thing with custom attribute value in jquery.
We almost require to set and get custom attribute when you are working with jquery code on your php or laravel project. when ever you need to set and get custom attribute value then this examples will help you.
I gave you bellow two example, so you can use any one as you want.
Example 1
<!DOCTYPE html>
<html>
<head>
<title>Jquery Set custom data attribute value | Jquery Get custom data attribute value - ItSolutionStuff.com</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div id="example1">Working with me</div>
<button class="set-attr">Set Attribute</button>
<button class="get-attr">Get Attribute</button>
<script type="text/javascript">
$(".set-attr").click(function(){
$("#example1").attr('custom-name', 'ItSolutionStuff.com');
});
$(".get-attr").click(function(){
var name = $("#example1").attr('custom-name');
alert(name);
});
</script>
</body>
</html>
Example 2
<!DOCTYPE html>
<html>
<head>
<title>Jquery Set custom data attribute value | Jquery Get custom data attribute value - ItSolutionStuff.com</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div id="example2">Working with me</div>
<button class="set-data">Set Attribute</button>
<button class="get-data">Get Attribute</button>
<script type="text/javascript">
$(".set-data").click(function(){
$("#example2").data('name', 'ItSolutionStuff.com 2');
});
$(".get-data").click(function(){
var name = $("#example2").data('name');
alert(name);
});
</script>
</body>
</html>
I hope it can help you...

Hardik Savani
I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Laravel, Angular, Vue, Node, Javascript, JQuery, Codeigniter and Bootstrap from the early stage. I believe in Hardworking and Consistency.
We are Recommending you
- Jquery Redirect to Another Page After 5 Seconds Example
- How to get last element from array object in Javascript or JQuery?
- Jquery check if value exists in Array Example
- How to Remove Query String from URL using JQuery?
- Check and Uncheck All Checkbox using JQuery Example
- How to access PHP variables in JQuery?