Introduction détaillée des attributs H5data-*-tutoriel HTML-php.cn

Introduction détaillée des attributs H5data-*

零下一度

Libérer： 2017-07-18 13:34:05

original

2504 Les gens l'ont consulté

H5 ajoute des attributs data-*, ce qui est très pratique.

attributs data-* : attributs personnalisés pour stocker des données, valeur de données, la valeur peut être n'importe quelle chaîne.

Obtenir la valeur :

var el = document.getElementById(&#39;div&#39;)    
console.log(el.getAttribute(&#39;data-created-time&#39;))

Copier après la connexion

Définir la valeur :

var el = document.getElementById(&#39;div&#39;)    
el.setAttribute(&#39;data-created-time&#39;,&#39;星期一&#39;)

Copier après la connexion

js peut utiliser l'attribut dataset pour accéder à la valeur de l'attribut de données

<div id=&#39;div&#39; data-mei=&#39;47&#39; data-tree-height=&#39;2.4m&#39;></div>    
var div= document.getElementById(&#39;tree&#39;)    
console.log(div.dataset.mei) // &#39;47&#39;   获取值    
console.log(tree.dataset.treeHeight) // &#39;2.4m&#39;    
tree.dataset.plantHeight = &#39;3m&#39;  //设置值

Copier après la connexion

Utilisez obj.data("property value") dans jQuery pour obtenir et définir la valeur des données.

Mais le problème des minuscules est souvent ignoré. H5 exige que tous les noms d'attributs soient en minuscules. L'habitude de nommer les casses en chameau est rompue

Le code de test est le suivant :

<html><head><script type="text/javascript" src="jquery-1.9.1.js?1.1.11"></script><script type="text/javascript">$(document).ready(function(){
  $("#btn2").click(function(){
    alert($("div").data("id"));
    alert($("div").data("Id"));
    alert($("div").data("otherId"));
    alert($("div").data("OtherId"));
    alert($("div").data("OTHERID"));var datas = $("div").data();
  });
});</script></head><body><button id="btn2">alert</button><div  data-id="小写id" data-Id="大写ID" data-otherId="驼峰id" data-other-id="横线id"></div></body></html>

Copier après la connexion

La valeur de l'alerte est inattendue. Après avoir obtenu toutes les valeurs des données via la méthode data(), vous pouvez voir les résultats suivants :

Résumé : Suivez l'écriture standard

1. data-* Tous les caractères doivent être en minuscules.

2. Plusieurs mots sont séparés par des lignes horizontales, par exemple, data-other-id => otherId L'attribut read supprimera les lignes horizontales et mettra en majuscule la première lettre.

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!