How You Can Use HTML5 Custom Data Attributes and Why

HTML5 custom data attributes allow developers to store custom data in HTML elements. They provide a way to add additional information to HTML elements that can be used by JavaScript or CSS, thereby enhancing web page functionality. This article will explain what data attributes are and what they are for.

Key Points

• HTML5 custom data attributes allow developers to store additional information on HTML elements that can be accessed and used by JavaScript or CSS, thereby enhancing web page functionality.
• Data attributes always start with "data-", can be used to style elements in CSS through the attribute selector, and can display information to the user through the attr() function.
• In JavaScript, data properties can be accessed using getAttribute() and setAttribute() methods, dataset attributes, or jQuery's data() methods.
• While custom data attributes are powerful, they should be used only if there are no other suitable HTML elements or attributes and should not be used to store large amounts of data.

Why use custom data properties?

We often need to store information associated with different DOM elements. This information may not be important to readers, but being able to easily access them will make our development efforts much easier. For example, suppose you list different restaurants on a web page. Before HTML5, if you want to store information such as the type of food provided by a restaurant or how far they are from the visitors, you will use the class attribute of HTML. What if you also need to store your restaurant ID to view the specific restaurant that the user wants to visit? Here are some questions about the methods based on HTMLclass attribute:

• HTML classProperties are not used to store such data. Its main purpose is to allow developers to assign style information to a set of elements.
• Every time adding a message, a new class is required to add to the element. This makes parsing data in JavaScript to get the required information even more difficult.
• Assume that the given class name begins with a number. If you decide to style the element later based on the data in the class name, you must escape the numbers or use the attribute selector in the stylesheet.

To solve these problems, HTML5 introduces custom data properties. All element attributes whose names start with data- are data attributes. You can also use these data attributes to style elements. Next, let's dig into the basics of data properties and learn how to access their values ​​in CSS and JavaScript.

HTML syntax

As mentioned earlier, the name of the data attribute will always start with data-. Here is an example:

<li data-type="veg" data-distance="2miles" data-identifier="10318">Salad King</li>

You can now use these data attributes to search and sort visitors' restaurants. For example, you can now show them all vegetarian restaurants within a certain distance. In addition to the data- prefix, the names of valid custom data attributes can only contain letters, numbers, hyphens (-), dots (.), colons (:), or underscores (_). It cannot contain capital letters. When using data properties, you need to pay attention to two things. First, the data stored in these properties should be of string type. Any content that can be encoded in strings can also be stored in data properties. All type conversions need to be done in JavaScript. Secondly, data attributes should be used only if there are no other suitable HTML elements or attributes. For example, it is inappropriate to store the class of an element in the data-class attribute. An element can have any number of data attributes, as well as any value you want.

Data attributes and CSS

You can use the attribute selector to style elements in CSS using data attributes. You can also use the attr() function to display information stored in data properties to the user (in tooltips or other ways).

Set the element style

Back to our restaurant example, you can set the background of the restaurant in different ways using the property selector, prompting the user for the type of restaurant or their distance from the user. Here is an example:

li[data-type='veg'] {
  background: #8BC34A;
}

li[data-type='french'] {
  background: #3F51B5;
}

Create tooltips

You can use tooltips to display additional information related to elements to the user. I recommend you use this method for rapid prototyping, rather than producing websites, for the reason that at least the CSS-only tooltips are not fully accessible. The information you want to display can be stored in the data-tooltip attribute.

<span data-tooltip="简单的解释">Word</span>

You can then use the ::before pseudo-element to present the data to the user.

span::before {
  content: attr(data-tooltip);
  //更多样式规则
}

span:hover::before {
  display: inline-block;
}

Use JavaScript to access data attributes

There are three ways to access data properties in JavaScript.

Use getAttribute and setAttribute

You can use getAttribute() and setAttribute() in JavaScript to get and set the values ​​of different data attributes. If the given property does not exist, the getAttribute method will return null or an empty string. Here is an example of how to use these methods:

let restaurant = document.getElementById("restaurantId");
let ratings = restaurant.getAttribute("data-ratings");

You can use the setAttribute method to modify the value of an existing property or add a new property.

restaurant.setAttribute("data-owner-name", "someName");

Use datasetProperties

A simpler way to access data properties is to use dataset properties. This property returns a DOMStringMap object containing an entry for each custom data property. There are a few things you need to be aware of when using the dataset attribute. It takes three steps to convert the custom data attribute to the DOMStringMap key:

• Remove the data-Prefix from the attribute name
Remove any hyphen followed by lowercase letters from the name and convert the following letters to uppercase
Other characters will remain the same. This means that any hyphen followed by lowercase letters will also remain the same.

element.dataset.keyname The properties can then be accessed using the camel name stored in the object as a key, such as element.dataset[keyname]. Another way to access properties is to use square bracket notation, such as

. Consider the following HTML:

<li data-type="veg" data-distance="2miles" data-identifier="10318">Salad King</li>

The following are some examples:

li[data-type='veg'] {
  background: #8BC34A;
}

li[data-type='french'] {
  background: #3F51B5;
}

This method is now supported in all major browsers and you should use it first to access custom data properties.

Using jQuery

data() You can also access the data properties of an element using the jQuery's

method. Before jQuery version 1.6, you must access the data properties using the following code:

<span data-tooltip="简单的解释">Word</span>

Starting from version 1.6, jQuery starts using camel versions of data properties. Now you can do the same with the following code:

span::before {
  content: attr(data-tooltip);
  //更多样式规则
}

span:hover::before {
  display: inline-block;
}

null You should know that jQuery will also try to internally convert strings obtained from data properties into appropriate types such as numbers, booleans, objects, arrays, and

.

let restaurant = document.getElementById("restaurantId");
let ratings = restaurant.getAttribute("data-ratings");

attr() If you want jQuery to get the value obtained from the data attribute as a string without trying to convert it to another type, you should use jQuery's

method. jQuery retrieves its value only when the data attribute is accessed for the first time. Then no longer access or change the data properties. All changes you make to these properties are made internally and are accessible only in jQuery. Suppose you are operating on the data attributes of the following list item:

restaurant.setAttribute("data-owner-name", "someName");

data-distanceYou can change the value of its

attribute using the following code:

<li data-type="veg" data-distance="2miles" data-identifier="10318" data-owner-name="someName">Salad King</li>

data-distance As you can see, accessing the value of the

attribute using native JavaScript (non-jQuery) will still provide the old results.

Conclusion

In this tutorial, I have covered all the important things about HTML5 data properties. In addition to creating tooltips and styleing elements using the attribute selector, you can also use data properties to store and display other data to users, such as notifications about unread messages, and more.

(The FAQ section should be added here, the content is consistent with the FAQ part in the input text, but the language expression can be more refined. To avoid duplication, I omit this part.)

The above is the detailed content of How You Can Use HTML5 Custom Data Attributes and Why. For more information, please follow other related articles on the PHP Chinese website!