Maison > Article > interface Web > Données d'attributs personnalisés HTML5 - * introduction détaillée et exemples d'opérations JS_html5 compétences du didacticiel

Données d'attributs personnalisés HTML5 - * introduction détaillée et exemples d'opérations JS_html5 compétences du didacticiel

WBOYoriginal: 2016-05-16 15:48:121998parcourir

Bien entendu, la définition et l'accès aux données peuvent être effectués via des scripts dans des navigateurs avancés. Très utile dans la pratique du projet.

Par exemple :

Copier le code

Le code est le suivant :

Utilisez la méthode d'attribut pour accéder à la valeur de l'attribut personnalisé data-*

Il est très pratique d'utiliser la méthode des attributs pour accéder à la valeur des attributs personnalisés data-* :

Copiez le code

Le code est le suivant :

// Utilisez getAttribute pour obtenir l'attribut data
var utilisateur = document . getElementById ( 'utilisateur' ) ;
var userName = plant . getAttribute ( 'data-uname' ) ; // userName = 'Script Home'
var userId = plante . getAttribute ( 'data-uid' ) ; // userId = '12345'

// Utilisez setAttribute pour définir l'attribut data-
utilisateur . setAttribute ( 'data-site' , 'http://www.jb51.net' ) ;

Cette méthode peut fonctionner normalement dans tous les navigateurs modernes, mais ce n'est pas le but des attributs data-* personnalisés de HTML 5, sinon elle ne sera pas différente des attributs personnalisés que nous avons utilisés auparavant, par exemple :

Copiez le code

Le code est le suivant :

Cet attribut personnalisé « original » n'est pas différent de l'attribut personnalisé data-* ci-dessus, mais le nom de l'attribut de connaissance est différent.

données d'accès à l'attribut de l'ensemble de données-*valeur d'attribut personnalisée

Cette méthode accède à la valeur des attributs personnalisés data-* en accédant à l'attribut dataset d'un élément. L'attribut dataset fait partie de l'API JavaScript HTML5 et est utilisé pour renvoyer un objet DOMStringMap avec les attributs data de tous les éléments sélectionnés.

Lors de l'utilisation de cette méthode, au lieu d'utiliser le nom complet de l'attribut, tel que data-uid, pour accéder aux données, le préfixe data- doit être supprimé.

Une autre chose à noter est que si le nom de l'attribut data contient un trait d'union, par exemple : data-date-of-birth, le trait d'union sera supprimé et converti en nom de cas de chameau. Le nom de l'attribut précédent sera converti après. qu'il devrait s'agir de : dateOfBirth.

Copier le code

Le code est le suivant :

Dock

Si vous souhaitez supprimer un attribut de données, vous pouvez procéder comme suit : delete el . dataset id ; ou el .dataset .

C'est magnifique, haha, mais malheureusement, le nouvel attribut de jeu de données n'est implémenté que dans les navigateurs Chrome 8 Firefox (Gecko) 6.0 Internet Explorer 11 Opera 11.10 Safari 6, donc en attendant, il est préférable d'utiliser getAttribute et setAttribute pour fonctionner.

À propos du sélecteur d'attributs de données

Dans le développement réel, vous trouverez peut-être utile de sélectionner des éléments pertinents en fonction d'attributs de données personnalisés. Par exemple, utilisez querySelectorAll pour sélectionner des éléments :

Copiez le code

Le code est le suivant :

// Sélectionne tous les éléments contenant l'attribut 'data-flowering'
document . querySelectorAll ( '[data-flowering]' ) ;

// Sélectionnez tous les éléments contenant la valeur d'attribut 'data-text-colour' de rouge
document . querySelectorAll ( '[data-text-colour="red"]' ) ;

De même, nous pouvons également définir des styles CSS pour les éléments correspondants via la valeur de l'attribut data-, comme dans l'exemple suivant :

Copier le code

Le code est le suivant :

dock

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment implémenter un champ de recherche vocale avec les compétences du didacticiel html5_html5Article suivant：Comment implémenter un champ de recherche vocale avec les compétences du didacticiel html5_html5

Articles Liés

Voir plus