How to use data-* attributes in HTML5

The data-attribute in HTML5 is mainly used to store private custom data in the page, with the purpose of creating a better user experience

Many new attributes have been added to HTML5 Attributes, today we will introduce the data-* attributes in HTML5, I hope it will be helpful to everyone.

【Recommended course: HTML5 course】

##data-* The meaning of the attribute

data-* The attribute is used to store the private custom data of the page or application. It is the custom data on all HTML elements. Properties, which store data that can be leveraged by JavaScript to create a better user experience.

data-* The attribute contains two parts:

Attribute name: The attribute name cannot contain any uppercase letters, and there must be one character after the prefix "data-", which cannot Is empty.

Attribute value: The attribute value can be any string.

<element data-*="somevalue">

Example

data-animal-type="动物类"

How to use data-* attributes

Since custom data attributes are valid HTML 5, they can be used in Use them in any browser that supports HTML 5 document types:

We can set the initial height or opacity of elements stored in JavaScript animations that may be needed, and also set parameters for Flash movies loaded via JavaScript as well Store custom network analysis tag data and more.

Example:

<script>
function showDetails(animal) {
    var animalType = animal.getAttribute("data-animal-type");
  console.log(animal.innerHTML + "是一种" + animalType + "。");

}
</script>
点击li时显示其类别


  
小猫咪
  
苹果
  

Rendering:

Before clicking

After clicking

Note

Although data attributes are flexible, data attributes are not applicable to all problems. For example, there are existing methods that are more suitable for storing data. attributes or elements, data attributes should not be used. For example, date/time data should be displayed semantically rather than stored in custom data attributes, and specific data attributes should not be tied to any styled CSS. In addition, as data attributes are used more and more widely, conflicts in naming conventions may become larger and larger, so when naming, you should pay attention to try to avoid confusion with plug-in or public attribute names

Summary: The above That’s the entire content of this article. I hope it will be helpful to everyone learning HTML5.

The above is the detailed content of How to use data-* attributes in HTML5. For more information, please follow other related articles on the PHP Chinese website!