Wozu dienen benutzerdefinierte HTML5-Attribute?

HTML5 Das benutzerdefinierte Attribut „data-*“ wird zum Speichern benutzerdefinierter Daten verwendet, die hinter einer privaten Seite angewendet werden, und benutzerdefinierte Daten können der Seite ein besseres interaktives Erlebnis verleihen (keine Notwendigkeit, Ajax zu verwenden oder Daten auf dem Server abzufragen), Syntax „< ;element data-*="Attributwert (eine Zeichenfolge) angeben">"; Das Attribut „data-*“ besteht aus zwei Teilen: 1. Der Attributname darf keine Großbuchstaben enthalten und muss nach „data-“ stehen mindestens ein Zeichen; 2. Attributwert, der eine beliebige Zeichenfolge sein kann.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5-Version, Dell G3-Computer.

html5 benutzerdefinierte Attribute<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-*

data-*-Attribute werden zum Speichern benutzerdefinierter Daten verwendet, die hinter privaten Seiten angewendet werden ein neues Attribut in HTML5. rrreee

• somevalue: Attributwert (eine Zeichenfolge) angeben

data-* Attribute können Daten in alle HTML-Elemente einbetten. 🎜🎜Benutzerdefinierte Daten können der Seite ein besseres interaktives Erlebnis verleihen (keine Notwendigkeit, Ajax zu verwenden oder Daten auf dem Server abzufragen). 🎜🎜data-* Das Attribut besteht aus den folgenden zwei Teilen: 🎜

• 🎜Der Attributname sollte keine Großbuchstaben enthalten, Nach den Daten muss mindestens ein Zeichen vorhanden sein. 🎜
• 🎜Attributwert, der eine beliebige Zeichenfolge sein kann🎜

🎜Hinweis: Das benutzerdefinierte Attributpräfix „data-“ wird vom Client ignoriert. 🎜🎜Sie können dataset verwenden, um das von data-attribute erstellte Objekt abzurufen. Diese Methode ist derzeit nur in einigen Browsern wie Chrome und Opera implementiert. Wenn andere Browser ihre Attributwerte abrufen müssen, müssen sie zum Betrieb getAttribute und setAttribute verwenden . 🎜🎜Solange wir unsere benutzerdefinierten Attribute mit „data-“ als Präfix im Tag definieren, können damit einige Daten gespeichert werden. 🎜rrreee🎜Dieses Datenattribut kann auch in CSS angewendet werden, vorausgesetzt, dass Ihr Browser die After-Pseudoklasse und das attr-Attribut des Inhalts unterstützt (niedrigere Versionen von IE unterstützen es nicht): 🎜rrreeerrreee🎜🎜So erhalten Sie den Wert von das Datenattribut? 🎜rrreee🎜1. Verwenden Sie „getAttribute“, um „rrreee“ zu erhalten , das dem Stilobjekt des angewendeten Elements ähnelt, dom.style.borderColor. Das Datenattribut ist beispielsweise data-other-attribute. Wenn wir den entsprechenden Wert erhalten möchten, können wir Folgendes verwenden: myp.dataset.otherAttribute🎜🎜🎜Wenn das HTML-Element mehrere benutzerdefinierte Attribute definiert, Wie bekommt man sie? 🎜rrreee🎜1. Verwenden Sie die Schleifendurchquerung🎜rrreee🎜2. Verwenden Sie das Attribut dataset🎜rrreee🎜Hinweis: dataset ist kein JavaScript-Objekt im typischen Sinne. Es handelt sich jedoch um ein DOMStringMap-Objekt. DOMStringMap ist eine neue interaktive Variable in HTML5, die mehrere Name-Wert-Paare enthält🎜🎜1), sodass alle benutzerdefinierten Attributwerte möglich sind in ein Array gestopft🎜rrreee🎜2), ein Datenattribut🎜rrreee🎜3 löschen it dataset, ist eine gewisse Kompatibilitätsverarbeitung erforderlich: 🎜rrreee🎜🎜Fazit: 🎜🎜Die Verwendung von dataset zum Betrieb von data ist besser als die Verwendung von getAttribute Die Geschwindigkeit ist etwas langsamer. Obwohl die Verwendung von dataset die Leistung des Codes nicht verbessern kann, ist sie für einen präzisen Code und eine Verbesserung der Lesbarkeit und Wartbarkeit des Codes sehr hilfreich. 🎜🎜【Empfohlene Kurse: 🎜HTML5-Video-Tutorial🎜, 🎜Web-Frontend🎜】🎜

Das obige ist der detaillierte Inhalt vonWozu dienen benutzerdefinierte HTML5-Attribute?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!