Maison > Article > interface Web > Comment pouvons-nous intégrer des attributs de données personnalisés sur tous les éléments HTML ?
Comment pouvons-nous intégrer des attributs de données personnalisés sur tous les éléments HTML ?
- PHPzavant
- 2023-08-28 12:49:061272parcourir
Dans cet article, nous devons intégrer des attributs de données personnalisés sur tous les éléments HTML. Nous pouvons utiliser les attributs data-* en HTML pour y parvenir.
En HTML, les attributs data-* sont utilisés pour personnaliser les données privées uniquement pour la page Web ou l'application. Cet attribut ajoute des valeurs personnalisées aux éléments HTML.
L'attribut data-* en HTML se compose de deux parties −
La valeur de l'attribut peut être n'importe quelle chaîne.
Les noms d'attribut ne doivent contenir que des lettres minuscules et doivent avoir au moins un caractère après le préfixe "data-".
Ces données sont souvent utilisées en JavaScript pour améliorer l'expérience utilisateur. Voici un exemple d'intégration d'attributs de données personnalisés sur des éléments HTML.
Exemple 1
Dans cet exemple,
-
Nous en avons répertorié trois (vêtements) avec des données personnalisées data-id et
data-price Ici, les attributs des données ne sont pas visibles par l'utilisateur.
Bien que les valeurs ne soient pas visibles par l'utilisateur, elles seront présentes dans le document.
<!DOCTYPE html>
<html>
<head>
<title>How do we embed custom data attributes on all HTML elements? </title>
</head>
<body>
<ul>
<li data-id="1" data-price="INR 1899">Shirt</li>
<li data-id="2" data-price="INR 2799">Pant</li>
<li data-id="3" data-price="INR 4599">Jacket</li>
</ul>
</body>
</html>
Ces valeurs ne sont pas affichées car nous n'avons pas extrait les propriétés personnalisées que nous avons spécifiées.
Exemple 2
Dans cet exemple,
Nous avons créé quatre liens avec des balises à l'intérieur du tableau HTML.
Chaque élément a un attribut personnalisé data-plyr-type qui contient un nom de joueur.
Nous avons utilisé l'événement onClick pour extraire des propriétés personnalisées.
Chaque fois que l'on clique sur l'élément
<a></a>, une fonction JavaScript extrait et affiche le nom du pays du joueur.
<!DOCTYPE html>
<html>
<head>
<script>
function showData(plyr) {
var players = plyr.getAttribute("data-plyr-type");
alert(plyr.innerHTML + " is a " + players + ".");
}
</script>
</head>
<body>
<h1>Cricketers!</h1>
<p>Click on a player to see which team he belongs to:</p>
<table border=2 px;>
<caption>Players</caption>
<tr>
<td onclick="showData(this)" id="owl" data-plyr-type="Afganistan player">Rashid khan</td>
<td onclick="showData(this)" id="owl" data-plyr-type="Pakistan player">Babar azam</td>
</tr>
<tr>
<td onclick="showData(this)" id="salmon" data-plyr-type="England player">Jos Buttler</td>
<td onclick="showData(this)" id="salmon" data-plyr-type="Australia player">Steve smith</td>
</tr>
<tr>
<td onclick="showData(this)" id="tarantula" data-plyr-type="India player">Jasprit bumrah</td>
<td onclick="showData(this)" id="tarantula" data-plyr-type="West indies player">Jason holder</td>
</tr>
</table>
</body>
</html>
Comme nous pouvons le voir dans le résultat, lorsque l'utilisateur clique sur les données du tableau d'un joueur de cricket, l'attribut personnalisé est extrait et le nom du pays du joueur spécifique est affiché.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!