What is the role of the data attribute in html5-Front-end Q&A-php.cn

Table of Contents

What is the role of the data attribute in html5?

物种

Home

Web Front-end

Front-end Q&A

What is the role of the data attribute in html5

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 20, 2022 am 10:44 AM

html5

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:

1	`<element data-*="somevalue">`

Copy after login

somevalue specifies the attribute value (a string)

The example is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<script>
function showDetails(animal)
{
var animalType = animal.getAttribute("data-animal-type");
alert("The " + animal.innerHTML + " is a " + animalType + ".");
}
</script>
</head>
<body>
<h1 id="物种">物种</h1>
<p>点击一个物种，看看它是什么类型：</p>
<ul>
  <li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li>
  <li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li>  
  <li onclick="showDetails(this)" id="tarantula" data-animal-type="spider">Tarantula</li>  
</ul>
</body>
</html>

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!

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