Detaillierte Einführung der H5data-*-Attribute-HTML-Tutorial-php.cn

Detaillierte Einführung der H5data-*-Attribute

零下一度

Freigeben： 2017-07-18 13:34:05

Original

2454 Leute haben es durchsucht

H5 fügt Daten-*-Attribute hinzu, was sehr praktisch ist.

Daten-*-Attribute: Benutzerdefinierte Attribute zum Speichern von Daten, Datenwert, der Wert kann eine beliebige Zeichenfolge sein.

Wert abrufen:

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

Nach dem Login kopieren

Wert festlegen:

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

Nach dem Login kopieren

js kann das Dataset-Attribut verwenden, um auf den Wert des Datenattributs

zuzugreifen

<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;  //设置值

Nach dem Login kopieren

Obj.data("property value") wird in jQuery verwendet, um den Wert von Daten abzurufen und festzulegen.

Aber das Problem der Kleinschreibung wird oft ignoriert. H5 erfordert, dass alle Attributnamen in Kleinbuchstaben geschrieben werden. Die Gewohnheit, Kamelbuchstaben zu verwenden, wird gebrochen

Der Testcode lautet wie folgt:

<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>

Nach dem Login kopieren

Der Wert der Warnung ist unerwartet. Nachdem Sie alle Datenwerte über die Methode data() abgerufen haben, können Sie die folgenden Ergebnisse sehen:

Zusammenfassung: Befolgen Sie die Standardschreibweise

1. data-* Alle Zeichen müssen Kleinbuchstaben sein.

2. Mehrere Wörter werden durch horizontale Linien getrennt, zum Beispiel data-other-id => otherId Das Leseattribut entfernt die horizontalen Linien und schreibt den ersten Buchstaben groß.

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung der H5data-*-Attribute. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!