How to Get & Set Data Attribute Value From Elements jQuery

How to get and set data attribute values. Using the jQuery data attr() method, you can get and set data attribute values easily from selected html elements.

jQuery attr() Method

The jQuery attr() method is used to get or set attributes and values of the selected html elements.

Syntax

For get an attribute’s value use the below syntax

$(selector).attr(attribute);

Using the below syntax you can set an attribute and values.

$(selector).attr(attribute,value);  

To set an attribute and value by using a function using this below syntax.

$(selector).attr(attribute,function(index,currentvalue)) ;

To set multiple attributes and values using this below syntax.

$(selector).attr({attribute:value, attribute:value,...})   

Parameters of jQuery attr() method

ParameterDescription
AttributeUsing this parameter to specify the name of the attribute.
ValueUsing this parameter to specify the value of the attribute.
Function (index, currentvalue)Using this parameter to specify a function that returns an attribute value to set.
Index: This is used to receive the index position of the element in the set.
Currentvalue: This is used to provide the current attribute value of selected elements.

Example jQuery Get Attribute

The following example will show you how to get the data-attribute value on click the html elements.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Data Attribute Values</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script type="text/javascript">
    $(document).ready(function() {
        $(".btn_click").click(function(){
            var gen = $(this).attr("data-gender");
            alert("You are selected : " + gen);
        });
    });
</script>
</head>
<body>
        <h3>Please select your gender :</h3>
        <label><input type="radio" name="gender" class="btn_click" data-gender="Male"> Male</label>
        <label><input type="radio" name="gender" class="btn_click" data-gender="Female"> Female</label>
</body>
</html>                            

Output

Get Data Attribute Values

Please select your gender :

In this above example jquery get Attr() method, You can use the jQuery attr() method to get the data-gender attribute of selected HTML element.

Example jQuery Set Attribute

The following example will show you how to Set the data-attribute value on click the html elements.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set Data Attribute Values</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script>
    $(document).ready(function(){
      $(".btn_click_attr").click(function(){
        $("#link").attr("href", "https://www.tutsmake.com/jquery/");
      });
    });
</script>
</head>
<body>
    <h3>Below link changed when you click on button</h3>
    <p><a href="https://www.tutsmake.com" id="link">Tutsmake.com</a></p>
    <button type="button" class="btn_click_attr" style="margin-top: 10px;">Click here to Set Data Attribu Values</button>
</body>
</html>                            

Output

jQuery Set Data Attribute Values

Below link changed when you click on button

Tutsmake.com

In this above example jquery set Attr() method, You can use the jQuery attr() method to set the href link value attribute of selected HTML element.

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *