Commentaire: HTML5 a ajouté une nouvelle fonctionnalité aux attributs de données personnalisés, c'est-à-dire des attributs de données sur les données. Dans HTML5, nous pouvons utiliser le préfixe avec des données - pour définir les propriétés personnalisées dont nous avons besoin pour stocker certaines données
Bien sûr, dans les navigateurs avancés, vous pouvez définir et accéder aux données via des scripts. Très utile dans la pratique du projet.
Par exemple:
Utilisez la méthode d'attribut pour accéder à la valeur de l'attribut Data- * Custom
Il est très pratique d'utiliser la méthode des attributs pour accéder à la valeur de l'attribut Data- * Custom:
// Utilisez GetAttribute pour obtenir des données - Attribut
var user = document. getElementById ('utilisateur');
var nom d'utilisateur = plante. getAttribute («Data-UName»); // username = 'Script House'
var userId = plante. getAttribute («data-uid»); // utilisateur = '12345'
// Utilisez SetAttribute pour définir les data-properties
utilisateur . setAttribute («Data-Site», «http://www.vevb.com»);
Cette méthode fonctionne bien dans tous les navigateurs modernes, mais ce n'est pas l'attribut de données personnalisés de HTML 5 qui est utilisé pour une utilisation, sinon il ne sera pas différent des attributs personnalisés que nous avons utilisés auparavant, par exemple:
<div id = "user" uid = "12345" uname = "script house"> </div>
<cript>
// Utilisez GetAttribute pour obtenir des données - Attribut
var user = document. getElementById ('utilisateur');
var nom d'utilisateur = plante. getAttribute («uname»); // username = 'Script House'
var userId = plante. getAttribute ('uid'); // utilisateur = '12345'
// Utilisez SetAttribute pour définir les data-properties
utilisateur . setAttribute ('Site', 'http://www.vevb.com');
</cript>
Cet attribut personnalisé "original" n'est pas différent de l'attribut de données de données ci-dessus, et les noms d'attribut de connaissances sont différents.
L'attribut de jeu de données accède à la valeur des données - * Attribut personnalisé
De cette façon, accède à la valeur d'attribut de jeu de données d'un attribut de données- * personnalisé en accédant à l'attribut de jeu de données d'un élément. Cette propriété d'ensemble de données fait partie de l'API JavaScript HTML5 et est utilisée pour renvoyer un objet DomStringMap avec tous les attributs de données d'élément sélectionnés.
Lorsque vous utilisez cette méthode, au lieu d'utiliser le nom d'attribut complet, tel que Data-UID, le préfixe de données doit être supprimé.
Une autre note spéciale est: Si le nom d'attribut de données contient des traits d'union, par exemple: data-date of naissance, le trait d'union sera supprimé et converti en nommage de type chameau. Le nom d'attribut précédent doit être converti: DateOfbirth.
<div data-id = "1234567890" data-name = "script house" Data-date-of-nirth> Door </div>
<script type = "text / javascript">
var el = document.QuerySelector ('# user');
console.log (el.id); // 'utilisateur'
console.log (el.dataset); // un domstringmap
console.log (el.dataset.id); // '1234567890'
console.log (el.dataset.name); // 'Script House'
console.log (el.dataset.dateofbirth); // ''
el.dataset.dateofbirth = '1985-01-05'; // Définissez la valeur de la date de naissance de données.
console.log ('SomeDataattr' dans el.dataset); // faux
el.dataset.somedataattr = 'mydata';
console.log ('SomeDataattr' dans el.dataset); // true
</cript>
Si vous souhaitez supprimer une propriété de données, vous pouvez le faire: supprimer El. ensemble de données. identifiant ; ou el .dataset. id = null; .
Il est magnifique, haha, mais malheureusement, le nouvel attribut de jeu de données n'est implémenté que dans Chrome 8+ Firefox (Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+ Browsers, donc la meilleure utilisation GetAttribute et SetAttribute pour fonctionner pendant cette période.
Sur le sélecteur de data-property
Dans le développement réel, vous pouvez le trouver utile, vous pouvez sélectionner des éléments associés en fonction de votre attribut de données personnalisé. Par exemple, utilisez QueySelectorall pour sélectionner les éléments:
// Sélectionnez tous les éléments contenant l'attribut «Data-Flowerring»
document . queySelectorall ('[Data-flowerring]');
// sélectionnez tous les éléments avec la valeur d'attribut «data-text-colour» rouge
document . queySelectorall ('[data-text-colour = "red"]');
De même, nous pouvons également définir des styles CSS pour les éléments correspondants via la valeur d'attribut de données, tels que l'exemple suivant:
<style type = "text / css">
.utilisateur {
Largeur: 256px;
hauteur: 200px;
}
.User [data-name = 'feiwen'] {
Couleur: marron
}
.User [data-name = 'css'] {
Couleur: rouge
}
</ style>
<div class = "user" data-id = "123" data-name = "feiwen"> 1 </div>
<div class = "utilisateur" data-id = "124" data-name = "css"> Pier </div>