jQuery Get/Set Data Attribute Value

Nov 15, 2022
Article · 3 min
641 words

Like (0)
Favorite (0)

Hello devs, today I'll show you how to how get data attribute value or set a new custom data attribute value in a jQuery way. I'll give you two examples of it. Let's see the examples below.

Example 1

In the first example we'll use attr() method of jQuery. Let's see the below source code.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Set Custom Attribute using jQuery - shouts.dev</title>

</head>
<body>
<div style="text-align: center">
    <h4>Set Custom Attribute using jQuery</h4>
    <button class="set-attr">Set Attribute</button>
    <button class="get-attr">Get Attribute</button>
</div>


<p id="result"></p>


<script src="https://code.jquery.com/jquery-3.6.1.min.js"
        integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
        crossorigin="anonymous"></script>

<script>

    $(document).ready(function () {
        $(document).on('click', ".set-attr", function () {
            $("#result").attr('site-name', 'shouts.dev');
        });

        $(document).on('click', ".get-attr", function () {
            var name = $("#result").attr('site-name');
            alert(name);
        });
    });
</script>
</body>
</html>

Using the attr() method we can modify any attributes that we use in our html. For more info you can go through here.

Example 2

In the second example we'll use data() method of jQuery. Let's see the below source code.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Set Custom Attribute using jQuery - shouts.dev</title>

</head>
<body>
<div style="text-align: center">
    <h4>Set Custom Attribute using jQuery</h4>
    <button class="set-attr">Set Attribute</button>
    <button class="get-attr">Get Attribute</button>

    <p id="result"></p>
</div>


<script src="https://code.jquery.com/jquery-3.6.1.min.js"
        integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
        crossorigin="anonymous"></script>

<script>

    $(document).ready(function () {
        $(document).on('click', ".set-attr", function () {
            $("#result").data('site-name', 'shouts.dev');
        });

        $(document).on('click', ".get-attr", function () {
            var name = $("#result").data('site-name');
            alert(name);
        });
    });

</script>
</body>
</html>

Using the data() method we can set/get any data property to the given attribute. For more info, you can go through it here.

That's it for today. Hope you've enjoyed this tutorial. Catch me in the comment section if anything goes wrong. Thanks for reading. :)

JavaScript