Which specific object does javascript provide to fetch data attributes of an element?
Show
In this article, I am going to show you how you can use HTML5 custom data attributes. I’m also going to present you with some use cases that you can find helpful in your work as a developer. Why Custom Data Attributes?Very often we need to store information associated with different DOM elements. This information might not be essential for readers, but having easy access to it would make life a lot easier for us developers. For instance, let’s say you have a list of different restaurants on a webpage. Before HTML5, if you wanted to store information about the type of food offered by restaurants or their distance from the visitor, you would have used the HTML Here are a few problems with the approach based on the HTML class attribute.
To get rid of these issues, HTML5 has introduced custom data attributes. All attributes on an element whose name starts with Next, let’s dive into the basics of data attributes and learn how to access their values in CSS and JavaScript. The HTML SyntaxAs I mentioned
earlier, the name of a data attribute will always start with
You can now use these data attributes to search and sort restaurants for your visitors. For example, you can now show them all the vegetarian restaurants within a certain distance. Besides the There are two things that you should keep in mind when using data attributes. First, data stored in these attributes should be of type string. Anything that can be string-encoded can be stored in data attributes as well. All the type conversions will need to be done in JavaScript. Second, data attributes should only be used when there are no other appropriate HTML elements or attributes. For example, it is not appropriate to store an element’s An element can have any number of data attributes with any value you want. Data Attributes and CSSYou can use data attributes in CSS to style elements using attribute selectors. You can also show the information stored in the data attribute to users (in a tooltip or some other way) with the help of the Styling ElementsGetting back to our restaurant example, you can give users a cue about the type of restaurant or its distance from them using attribute selectors to style the background of the restaurants differently. Here is an example:
See the Pen Styling elements with data attributes by SitePoint (@SitePoint) on CodePen. Creating TooltipsYou can use tooltips to show users some additional information related to an element. I recommend you use this method for quick prototypes rather than a production website, not least because CSS-only tooltips are not fully accessible. The information that you want to show can be stored in a
You can then present the data to the user with the
See the Pen Creating tooltips with data attributes by SitePoint (@SitePoint) on CodePen. Accessing Data Attributes with JavaScriptThere are three ways of accessing data attributes in JavaScript. Using getAttribute and setAttributeYou can use The
You can use the
Using the dataset PropertyA simpler method of accessing data attributes
is with the help of the There are a few things that you should keep in mind while using the It takes three steps to transform a custom data attribute into a
The attributes can then be accessed using the camelCase name stored in the object as a key like Another way of accessing the attributes is using bracket notation, like Consider the following HTML:
Here are a few examples:
This method is now supported in all major browsers and you should favor it over the previous method for accessing custom data attributes. Using jQueryYou can also use the jQuery
From version 1.6, jQuery started using the camelCase version of data attributes. Now, you can do the same thing using the following code:
You should know that jQuery also tries to internally convert the string obtained from a data attribute into a suitable type like numbers, booleans, objects, arrays and null.
If you want jQuery to get the value of an attribute as a string without any attempt to convert it into other types, you should use jQuery’s jQuery only retrieves the value of data attributes the first time they are accessed. The data attributes are then no longer accessed or changed. All the changes that you make to those attributes are made internally and accessible only within jQuery. Let’s assume you are manipulating the data attributes of the following list item:
You can use the code below to change the value of its
As you can see, accessing the value of the ConclusionIn this tutorial I have covered all the important things that you need to know about HTML5 data attributes. Besides creating tooltips and styling elements using attribute selectors, you can use data attributes to store and show users some other data like a notification about unread messages and so on. If you have any other questions about data attributes, let me know in the comments. What are data attributes JavaScript?What are data attributes? Data attributes are actually HTML attributes that allow you to create and assign bespoke data points to HTML elements. They are accessible via HMTL, CSS, and JavaScript, making them a powerful choice for storing bits of information that maybe aren't so appropriate for class lists or id s.
How do you set data attribute using JavaScript?In order to create a new data attribute in JavaScript we just need to add a new property to the dataset object with a value. This will update the dataset object and our HTML which means our HTML will look like this.
Which method is used in JavaScript to get the value of an attribute of a particular element?The getAttribute() method of the Element interface returns the value of a specified attribute on the element.
How do you get data attribute value in React js?react get data attribute from element. Test .const id = e. target. getAttribute("data-id"); //alternate to getAttribute.. const id = e. target. attributes. getNamedItem("data-id"). value; . |