Quelles sont les utilisations des attributs personnalisés HTML5 ?

L'attribut personnalisé "data-*" html5 est utilisé pour stocker des données personnalisées appliquées derrière une page privée, et les données personnalisées peuvent donner à la page une meilleure expérience interactive (pas besoin d'utiliser Ajax ou d'interroger des données sur le serveur), syntaxe "< ;element data-*="Spécifier la valeur de l'attribut (une chaîne)">"; L'attribut "data-*" se compose de deux parties : 1. Le nom de l'attribut ne doit pas contenir de lettres majuscules et doit être après "data-" au moins un caractère ; 2. Valeur d'attribut, qui peut être n'importe quelle chaîne.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5, ordinateur Dell G3.

html5 attributs personnalisés<code><span style="font-size: 18px;">data-*</span>

data-* 属性用于存储私有页面后应用的自定义数据，是 HTML5 新增的属性。

<element data-*="somevalue">

• somevalue：指定属性值 (一个字符串)    

data-* 属性可以在所有的 HTML 元素中嵌入数据。

自定义的数据可以让页面拥有更好的交互体验（不需要使用 Ajax 或去服务端查询数据）。

data-* 属性由以下两部分组成：

• 属性名不要包含大写字母，在 data- 后必须至少有一个字符。

• 属性值，该属性值可以是任何字符串

注意： 自定义属性前缀 "data-" 会被客户端忽略。

利用dataset可以获取data-属性构造的对象，该方法目前只能在Chrome 、Opera等部分浏览器中实现，其他浏览器如需获取其属性值需要使用getAttribute和setAttribute来操作。

只要在标签里面以”data-”为前缀定义我们的自定义属性就可以用来进行一些数据的存放。

43d5f872dac78da2f00d1b2554e67c92在标签里设置H5新增的自定义属性16b28748ea4df4d9c2150843fecfba68

这个data属性还可以应用在CSS中，前提是你的浏览器支持after伪类，以及content的attr属性（低版本的IE不支持）： 

737b187744250f324eeb34e9a767a074data属性应用于CSS中16b28748ea4df4d9c2150843fecfba68

#myDiv{
  position: ralative;
}
 
#myDiv:hover:after{
  position: absolute;
  top: 0px;
  left: 0px;
  content: attr(data-attribute);
  color: red;
}

如何获取data属性的值？

43d5f872dac78da2f00d1b2554e67c92在标签里设置H5新增的自定义属性16b28748ea4df4d9c2150843fecfba68

1、使用getAttribute来获取

var myDiv = document.getElementById("myDiv");
var theValue = myDiv.getAttribute("user-defined-attribute");

2、使用Html5自定义属性对象Dataset来获取

var myDiv = document.getElementById("myDiv");
 
var theValue = myDiv.dataset.attribute;

注意：带连字符连接的名称在使用的时候需要命名驼峰化，即大小写组合书写，这与应用元素的style对象类似，dom.style.borderColor。例如data属性为data-other-attribute，则我们要获取相应的值可以使用：myp.dataset.otherAttribute

如果Html元素定义了多个自定义属性，如何获取？

89d9a64ee0d1f224431c05a17eee736b在标签里设置多个自定义属性16b28748ea4df4d9c2150843fecfba68

1、使用循环遍历

 var myDiv = document.getElementById("myDiv");
var attrs = myDiv.attributes,
var expense = {}, i, j;  
for (i = 0, j = attrs.length; i < j; i++) {
  if(attrs[i].name.substring(0, 5) == 'data-') {
    expense[attrs[i].name.substring(5)] = attrs[i].value;
  }
}

2、使用dataset属性

var expense = document.getElementById('myDiv').dataset;

注：dataset并不是典型意义上的JavaScript对象，而是个DOMStringMap对象，DOMStringMap是HTML5一种新的含有多个名-值对的交互变量

1）、让所有的自定义的属性值塞到一个数组中

var chartInput = [];
 
for (var item in expense) {
  chartInput.push(expense[item]);
}

2）、删掉一个data属性

delete myDiv.dataset.attribute;

3、增加一个data属性

myDiv.dataset.attribute4 = 'value4';

dataset的兼容性处理

如果浏览器不支持dataset，有必要做一下兼容处理：

if(myDiv.dataset) {
  myDiv.dataset.attribute = "valueXX"; // 设置自定义属性
  var theValue = myDiv.dataset.attribute; // 获取自定义属性
} else {
  myDiv.setAttribute("data-attribute", "valueXX"); // 设置自定义属性
  var theValue = myDiv.getAttribute("data-attribute"); // 获取自定义属性
}

结语：

使用dataset操作data 要比使用getAttribute速度稍微慢些，虽然使用datasetdata-*

Les attributs data-* sont utilisés pour stocker des données personnalisées appliquées derrière des pages privées, c'est un nouvel attribut en HTML5. rrreee

• somevalue : Spécifiez la valeur de l'attribut (une chaîne)

data-* Les attributs peuvent intégrer des données dans tous les éléments HTML. 🎜🎜Les données personnalisées peuvent donner à la page une meilleure expérience interactive (pas besoin d'utiliser Ajax ou d'interroger des données sur le serveur). 🎜🎜data-* L'attribut se compose des deux parties suivantes : 🎜

• 🎜Le nom de l'attribut ne doit pas contenir de lettres majuscules, après les données- Il doit y avoir au moins un caractère. 🎜
• 🎜Valeur d'attribut, qui peut être n'importe quelle chaîne🎜

🎜Remarque : Le préfixe d'attribut personnalisé "data-" sera ignoré par le client. 🎜🎜Vous pouvez utiliser un ensemble de données pour obtenir l'objet construit par data-attribute. Cette méthode n'est actuellement implémentée que dans certains navigateurs tels que Chrome et Opera. Si d'autres navigateurs ont besoin d'obtenir leurs valeurs d'attribut, ils doivent utiliser getAttribute et setAttribute pour fonctionner. . 🎜🎜Tant que nous définissons nos attributs personnalisés avec "data-" comme préfixe dans la balise, il peut être utilisé pour stocker certaines données. 🎜rrreee🎜Cet attribut data peut également être appliqué en CSS, à condition que votre navigateur supporte la pseudo-classe after et l'attribut attr de content (les versions inférieures d'IE ne le supportent pas) : 🎜rrreeerrreee🎜🎜Comment obtenir la valeur de l'attribut data ? 🎜rrreee🎜1. Utilisez getAttribute pour obtenir 🎜rrreee🎜2. Utilisez l'objet d'attribut personnalisé HTML5 pour obtenir 🎜rrreee🎜Remarque : les noms avec des traits d'union doivent être mis en majuscules et minuscules lorsqu'ils sont utilisés, c'est-à-dire une écriture combinée en majuscules et en minuscules. , qui est similaire à l'objet style de l'élément appliqué, dom.style.borderColor. Par exemple, l'attribut data est data-other-attribute Si nous voulons obtenir la valeur correspondante, nous pouvons utiliser : myp.dataset.otherAttribute🎜🎜🎜Si l'élément Html définit plusieurs attributs personnalisés, comment les obtenir ? 🎜rrreee🎜1. Utilisez le parcours de boucle🎜rrreee🎜2. Utilisez l'attribut dataset🎜rrreee🎜Remarque : dataset n'est pas un objet JavaScript au sens typique, mais il s'agit d'un objet DOMStringMap, DOMStringMap est une nouvelle variable interactive en HTML5 qui contient plusieurs paires nom-valeur🎜🎜1), permettant à toutes les valeurs d'attribut personnalisées d'être inséré dans un tableau🎜rrreee🎜2), supprimez un attribut de données🎜rrreee🎜3 Ajoutez un attribut de données🎜rrreee🎜🎜traitement de compatibilité des ensembles de données🎜🎜si le navigateur ne le prend pas en charge. Dans cet ensemble de données, il est nécessaire de faire quelques traitements de compatibilité : 🎜rrreee🎜🎜Conclusion : 🎜🎜Utiliser dataset pour exploiter les données est préférable à l'utilisation de getAttribute La vitesse est légèrement plus lente. Bien que l'utilisation de dataset ne puisse pas améliorer les performances du code, elle est très utile pour un code concis et pour améliorer la lisibilité et la maintenabilité du code. 🎜🎜【Cours recommandés : 🎜Tutoriel vidéo HTML5🎜, 🎜web front-end🎜】🎜

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!