How to get custom element attribute data in jQuery ?
Last Updated :
24 Nov, 2022
Apart from attributes, we can also use custom element attributes. In this article, we will learn how to get the value of a custom attribute in an HTML element using jQuery.
What is Attribute? The HTML attribute provides information about the element. It decides the behavior of an element.
Examples of attributes:
- name: It specifies the name of an element
- style: It is used to beautify an element
Custom element attribute: Custom element attributes can be used to embed custom data about the element in a (key, value) format. They can be used to store data privately on a specific page.
Using data(): The data() method in jQuery can be used to get the data of custom attributes that start with data-.
Syntax:
.data( key )
Parameters:
- key: A string naming the piece of data to get.
Return:
- It returns the value at the named data store for the first element in the set of matched elements.
Approach:
- Consider mydata is the name of your custom attribute. In the HTML element, write it as data-mydata and store some data in it.
<h1 id="someid" data-mydata ="THIS IS CUSTOM ATTRIBUTE DATA"></h1>
- Now pass the name of the attribute to the data() method to get the custom attribute data.
$('#someid').data('mydata')
Example 1: We will see the full code of how to use custom element attributes and how to get the data of custom attributes in jQuery.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
function getCustomAttributeData(attName){
$(document).ready(function() {
alert($('#someid').data(attName));
});
}
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h1 id="someid" data-mydata="THIS IS CUSTOM ATTRIBUTE DATA">
</h1>
Click to display custom attribute data :
<button onclick="getCustomAttributeData('mydata')">
Click
</button>
</body>
</html>
Output:
Using .attr(): The attr() method in jQuery can be used to get the data of custom attributes.
Syntax:
.attr( key )
Parameters:
- key: The name of the attribute to get.
Return:
- It returns the value at the named data store for the first element in the set of matched elements.
Approach:
1. Consider mydata is the name of your custom attribute. In the HTML element assign some data to mydata attribute.
<h1 id="someid" mydata ="THIS IS CUSTOM ATTRIBUTE DATA"></h1>
2. Now pass the name of the attribute to the attr() method to get the custom attribute data.
$('#someid').attr('mydata')
Example 2:
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
function getCustomAttributeData(attName){
$(document).ready(function() {
alert($('#someid').attr(attName));
});
}
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h1 id="someid" mydata="THIS IS CUSTOM ATTRIBUTE DATA">
</h1>
Click to display custom attribute data :
<button onclick="getCustomAttributeData('mydata')">
Click
</button>
</body>
</html>
Output:
Similar Reads
How to select elements by attribute in jQuery ? jQuery is a lightweight JavaScript library. In the vanilla JavaScript language, the getElementById method is used to select an element. However, jQuery provides a much lighter alternative for the same purpose. The 'jQuery Selector' allows the user to manipulate HTML elements and the data inside it(D
2 min read
JavaScript - How to Get the Data Attributes of an Element? Here are the various methods to get the data attributes of an element using JavaScript1. Using dataset PropertyThe dataset property in JavaScript allows you to access all data attributes of an HTML element as a DOMStringMap object. It simplifies retrieving, modifying, or interacting with custom data
2 min read
How to Add Attributes to an HTML Element in jQuery? To add attributes to an HTML element in jQuery, the attr() method can be used. This allows to set one or more attributes for a selected element, such as id, class, src, and href.Approach: Given an HTML document containing <label>, <input>, and <button> elements. The <input> e
1 min read
How to declare a custom attribute in HTML ? In this article, we will learn how to declare a custom attribute in HTML. Attributes are extra information that provides for the HTML elements. There are lots of predefined attributes in HTML. When the predefined attributes do not make sense to store extra data, custom attributes allow users to crea
2 min read
jQuery | Get Content and Attributes Get Content: In order to get the content of DOM object, there are three simple methods.jQuery methods for DOM manipulation which are listed below: text(): It is used to set or return the text content of selected elements. html(): It is used to set or return the content of selected elements including
2 min read
How to get a DOM Element from a jQuery Selector ? The Document Object Model (DOM) elements are something like a DIV, HTML, BODY element on the HTML page. A jQuery Selector is used to select one or more HTML elements using jQuery. Mostly we use Selectors for accessing the DOM elements. If there is only one particular unique element in the HTML page
2 min read