Can i use data attributes

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. You 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 attr function.

Getting 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. I recommend you use this method for quick prototypes rather than a production website, not least because CSS-only tooltips are not fully accessible. You can use getAttribute and setAttribute in JavaScript to get and set the value of different data attributes. The getAttribute method will either return null or an empty string if the given attribute does not exist.

Here is an example of using these methods:. You can use the setAttribute method to modify the value of existing attributes or to add new attributes.

A simpler method of accessing data attributes is with the help of the dataset property. There are a few things that you should keep in mind while using the dataset property. Just use data attributes for that:. Reading the values of these attributes out in JavaScript is also very simple. To get a data attribute through the dataset object, get the property by the part of the attribute name after data- note that dashes are converted to camelCase.

Each property is a string and can be read and written. In the above case setting article. For example to show the parent data on the article you can use generated content in CSS with the attr function:. You can also use the attribute selectors in CSS to change styles according to the data:. You can see all this working together in this JSBin example.

The first is attribute selectors, and the second is the attr function. Really any attribute can be a selector in our CSS rules. Using data attributes to apply styles this way can make stylesheet organization better by reducing helper classes; instead of creating arbitrary classes like.

Our intentions will be more clear when other people or our future selves drop in to read our CSS. This makes it more obvious where our logic for changing background values is coming from than opaquely slapping helper classes on p elements would. This allows us to move further away from the manual application of styles provided by attribute selectors and closer to treating a data attribute like a variable.

The attr function lets us grab data from the element that we're selecting and styling. To do this, use attr and pass it the name of your desired data attribute as an argument. For example, let's display the value of a data attribute after our paragraph element. We just need to add a CSS rule to our stylesheet. JavaScript allows us to complete the transition away from manually attaching data to elements.

Data attributes are a great way to endow HTML elements with extra information, but getting and setting the data from these attributes with JavaScript is what really makes this feature useful. Simply drill down through dataset and request your attribute by name. When we want to set a new value for a data attribute, we can use the same JavaScript function that we'd use for setting any built-in HTML attribute: setAttribute.

Notice that here we include data- before the name of our attribute since this function isn't specific to data attributes. As always, be sure to check how widely supported features of the web are before you use them in production. HTML data attributes enjoy quite wide support with one caveat: older versions of Internet Explorer don't support Element. To cater to that userbase 0. Simply pass only one argument--the name of the attribute that you're trying to grab--and that attribute's value will be returned to you.

Accessibility is a larger concern; always take the time to make your web creations as broadly accessible as you can. We need to make web technologies and learning resources freely available to ensure the growth and development of the web as a public platform.