interface Web
tutoriel HTML
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 ?
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>, 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 id="Cricketers">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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1359
52
Comment lire des données Excel en HTML
Mar 27, 2024 pm 05:11 PM
Comment lire des données Excel en HTML : 1. Utilisez la bibliothèque JavaScript pour lire les données Excel ; 2. Utilisez le langage de programmation côté serveur pour lire les données Excel.
La différence entre appendChild et append dans JS
Feb 20, 2024 pm 06:57 PM
La différence entre appendChild et append dans JS nécessite des exemples de code spécifiques. En JavaScript, lorsque nous devons ajouter dynamiquement des éléments enfants au DOM (Document Object Model), nous utilisons généralement les méthodes appendChild et append. Bien que leur objectif soit d'ajouter des éléments enfants aux éléments parents, il existe certaines différences dans leur utilisation. 1. Méthode appendChild La méthode appendChild est l'une des méthodes de l'objet nœud DOM.
Exécuter la fonction PHP en utilisant onclick
Feb 29, 2024 pm 04:31 PM
Nous aborderons également une autre façon d'exécuter une fonction PHP via l'événement onclick() en utilisant la bibliothèque Jquery. Cette méthode appelle une fonction javascript, qui affichera le contenu de la fonction php dans la page Web. Nous montrerons également une autre façon d'exécuter une fonction PHP en utilisant l'événement onclick(), en appelant la fonction PHP en utilisant du JavaScript pur. Cet article présentera un moyen d'exécuter une fonction PHP, d'utiliser la méthode GET pour envoyer les données dans l'URL et d'utiliser la fonction isset() pour vérifier les données GET. Cette méthode appelle une fonction PHP si les données sont définies et que la fonction est exécutée. Utiliser jQuery pour exécuter une fonction PHP via l'événement onclick() que nous pouvons utiliser
Qu'est-ce que le saut de ligne Dreamweaver ?
Apr 08, 2024 pm 09:54 PM
Utilisez la balise <br> dans Dreamweaver pour créer des sauts de ligne, qui peuvent être insérés via le menu, les touches de raccourci ou la saisie directe. Peut être combiné avec des styles CSS pour créer des lignes vides de hauteurs spécifiques. Dans certains cas, il est plus approprié d'utiliser la balise <p> au lieu de la balise <br> car elle crée automatiquement des lignes vides entre les paragraphes et applique un contrôle de style.
Utilisez CSS Transform pour transformer des éléments
Feb 24, 2024 am 10:09 AM
Utilisation de Transform en CSS La propriété Transform de CSS est un outil très puissant qui peut effectuer des opérations telles que la traduction, la rotation, la mise à l'échelle et l'inclinaison des éléments HTML. Cela peut changer radicalement l’apparence des éléments et rendre les pages Web plus créatives et dynamiques. Dans cet article, nous présenterons en détail les différentes utilisations de Transform et fournirons des exemples de code spécifiques. 1. Traduire (Traduire) Traduire fait référence au déplacement d'un élément sur une distance spécifiée le long de l'axe x et de l'axe y. Sa syntaxe est la suivante : tran
Que signifie la crête en CSS
Apr 28, 2024 pm 04:06 PM
Ridge est un style de bordure en CSS utilisé pour créer une bordure 3D avec un effet de relief, qui se manifeste par une ligne en forme de crête en relief.
Comment utiliser le survol en CSS
Feb 23, 2024 pm 12:06 PM
La pseudo-classe hover en CSS est un sélecteur très couramment utilisé qui permet de changer le style d'un élément lorsque la souris le survole. Cet article présentera l'utilisation du survol et fournira des exemples de code spécifiques. 1. Utilisation de base Pour utiliser le survol, nous devons d'abord définir un style pour l'élément, puis utiliser la pseudo-classe :hover pour spécifier le style correspondant lorsque la souris survole. Par exemple, nous avons un élément bouton Lorsque la souris survole le bouton, nous voulons que la couleur d'arrière-plan du bouton passe au rouge et la couleur du texte au blanc.
Comment connecter des fichiers HTML et des fichiers CSS
Mar 26, 2024 pm 02:31 PM
La connexion des fichiers HTML et CSS est cruciale pour l'apparence et l'expérience utilisateur d'une page Web. Cet article détaille les méthodes de connexion entre les fichiers HTML et les fichiers CSS, notamment les styles en ligne, les feuilles de style internes et les feuilles de style externes. En comprenant ces méthodes et les considérations associées, les développeurs peuvent implémenter efficacement le style et la mise en page des pages Web.
