Introduction de l'article de wulin.com (www.vevb.com): La mise en œuvre d'attributs personnalisés dans HTML5 n'est pas techniquement compliquée. La vraie difficulté est de savoir si la méthode que vous choisissez d'utiliser convient à votre projet; Le cas échéant, comment le rendre plus efficace? N'oubliez pas qu'il est trop tôt pour activer la méthode de l'ensemble de données en tant que fonction de page, après tout, de nombreux navigateurs ne prennent pas en charge cette fonction.
Le développement de HTML5 bat son plein, et l'utilisation d'attributs personnalisés dans HTML5 gagne progressivement en popularité parmi les développeurs; De plus, il joue également un rôle important dans la sémantique du développement Web. Dans cet article, nous explorerons la création et l'accès des propriétés de données personnalisées HTML5, y compris les fonctions JavaScript, à travers des exemples pratiques.
Avant d'utiliser HTML5, ajoutez d'abord des attributs personnalisés à l'élément HTML et y accédez via JavaScript. Si vous l'avez déjà essayé, vous constaterez qu'il est facile d'ignorer la vérification des balises, et HTML5 peut vous fournir la fonction de création et d'utilisation de vos propres attributs d'élément dans une page Web valide.
Créer des fichiers HTML5:
Si vous n'avez pas compris lequel utiliser, vous pouvez copier le code suivant:
<! Doctype html>
<html>
<adal>
<cript>
/ * fonctionne ici * /
</cript>
</ head>
<body>
</docy>
</html>
Définissez des éléments personnalisés dans le corps et accédez à eux en utilisant des éléments JavaScript dans une partie de la zone de script de la tête.
Créer des éléments:
Tout d'abord, ajoutez du contenu simple et des attributs personnalisés ainsi que des éléments comme les ID afin que nous puissions reconnaître des exemples JavaScript.
<div id = Product1 Data-Product-category = Clothing>
Chemise en coton
</div>
Comme vous pouvez le voir, l'attribut personnalisé se présente sous la forme de: data- *, définissez le nom dans la section de données ou le nom que vous avez sélectionné. L'utilisation de propriétés personnalisées dans HTML5 est le seul moyen de le faire. Par conséquent, si vous souhaitez vérifier que la page Web est valide, vous pouvez utiliser cette méthode.
Bien sûr, la partie Détails du projet détermine si une propriété personnalisée vous est utile et comment le nommer. Cet exemple peut être appliqué aux sites Web de détail dans différentes catégories de produits.
Les propriétés personnalisées vous permettent d'utiliser du code JavaScript dans la page d'une manière spéciale pour définir des éléments, tels que les capacités d'affichage d'animation. S'il n'y a pas d'éléments HTML standard, nous vous recommandons d'utiliser des propriétés personnalisées.
Ajouter un bouton de test
L'événement peut être exécuté à l'aide de ses propres éléments JavaScript sur la page, à condition que le code suivant soit ajouté à la page:
<entrée type = Button Value = Get Attribut onClick = GetElementAttribute ('Product1') />
Obtenez des attributs:
La façon la plus courante d'accéder aux propriétés en JavaScript est d'utiliser GetAttributes, qui est également la première étape que nous devons faire. Ajoutez la fonction suivante dans la zone de script de tête de la page:
fonction getElementAttribute (elemid) {
var theelement = document.getElementById (elemid);
var theaTTribute = theelement.getAttribute ('Data-Product-Category');
alerte (theaTtribute);
}
Ici, nous avons ajouté la valeur d'alerte à l'exemple, et bien sûr, vous pouvez également l'ajouter dans le script en fonction de vos propres besoins.
Obtenir des données:
Vous pouvez utiliser des ensembles de données d'éléments au lieu de DOM GetAttributes, qui peuvent être plus efficaces, en particulier dans certains cas où le code itère à travers plusieurs attributs, cependant, la prise en charge du navigateur pour l'ensemble de données est toujours très faible, donc en gardant cela à l'esprit, ce code peut exécuter le même processus que la méthode // derrière elle.
// var theaTTribute = theelement.getAttribute («Data-Product-Category»); var theaTTribute = theelement.dataset.productcategory;
Supprimez les données - dans l'ensemble de données en commençant par le nom d'attribut, il est toujours inclus dans le HTML.
Notez que si vous avez un trait d'union dans votre nom de propriété personnalisé, cela prendra le formulaire Camel-Case lorsqu'il est accessible par les données, c'est-à-dire (la catégorie de données de données devient ProductCategory).
Autres modules et fonctions
Nous avons obtenu cette propriété et le script peut toujours être défini et supprimé. Le code suivant montre comment définir les propriétés à l'aide de modules et de jeux de données JavaScript standard.
Vous pouvez également utiliser la méthode ou l'ensemble DOM pour supprimer un certain attribut:
// Méthode DOM
theElement.RemoveAttribute («Data-Product-catégorie»);
// version de l'ensemble de données
theelement.dataset.productcategory = null;
Conclusion:
La mise en œuvre de propriétés personnalisées dans HTML5 n'est pas techniquement compliquée. La vraie difficulté est de savoir si la méthode que vous choisissez d'utiliser convient à votre projet; Si oui, comment pouvez-vous le rendre plus efficace? N'oubliez pas qu'il est trop tôt pour activer la méthode de l'ensemble de données en tant que fonction de page, après tout, de nombreux navigateurs ne prennent pas en charge cette fonction.