What is the role of the data attribute in html5

WBOY
Release: 2022-06-20 10:44:47
Original
4024 people have browsed it

The data attribute in html5 is used to store custom data applied after private pages. "data-*" is a new custom data attribute function in HTML5, which can be used to temporarily store data and customize The data can give the page a better interactive experience; the attribute name of this attribute cannot contain uppercase letters, and there must be at least one character after "data-".

What is the role of the data attribute in html5

The operating environment of this tutorial: Windows 10 system, HTML5 version, Dell G3 computer.

What is the role of the data attribute in html5?

The data-* attribute is used to store custom data applied behind a private page.

data-* attributes can embed data in all HTML elements.

Customized data can give the page a better interactive experience (no need to use Ajax or query data on the server).

data-* The attribute consists of the following two parts:

  • The attribute name must not contain uppercase letters, and there must be at least one character after data-.

  • This attribute can be any string

data-* is a new custom data attribute function in HTML5, which can be temporarily stored Data Usage. You can use dataset to obtain the object constructed by data-attribute. This method is currently only implemented in some browsers such as Chrome and Opera. If other browsers need to obtain their attribute values, they need to use getAttribute and setAttribute to operate.

The syntax is:

Copy after login

somevalue specifies the attribute value (a string)

The example is as follows:

    123  

物种

点击一个物种,看看它是什么类型:

  • Owl
  • Salmon
  • Tarantula
Copy after login

Output result:

What is the role of the data attribute in html5

(Learning video sharing:css video tutorial,html video tutorial)

The above is the detailed content of What is the role of the data attribute in html5. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!