Artikeleinführung von Wulin.com (www.vevb.com): Die Implementierung benutzerdefinierter Attribute in HTML5 ist technisch nicht kompliziert. Die wirkliche Schwierigkeit ist, ob die Methode, die Sie verwenden, für Ihr Projekt geeignet ist. Wie können Sie gegebenenfalls effektiver gestalten? Bitte denken Sie daran, dass es zu früh ist, um die Datensatzmethode als Seitenfunktion zu aktivieren. Immerhin unterstützen viele Browser diese Funktion nicht.
Die Entwicklung von HTML5 ist in vollem Gange, und die Verwendung von benutzerdefinierten Attributen in HTML5 gewinnt allmählich bei Entwicklern an Popularität. Darüber hinaus spielt es auch eine wichtige Rolle bei der Semantik der Webentwicklung. In diesem Artikel werden wir die Erstellung und den Zugriff von HTML5 -benutzerdefinierten Dateneigenschaften, einschließlich JavaScript -Funktionen, anhand praktischer Beispiele untersuchen.
Fügen Sie vor Verwendung von HTML5 zunächst benutzerdefinierte Attribute zum HTML -Element hinzu und greifen Sie über JavaScript darauf zu. Wenn Sie es schon einmal ausprobiert haben, werden Sie feststellen, dass es einfach ist, die Tag -Überprüfung zu ignorieren, und HTML5 kann Ihnen die Funktion des Erstellens und Verwenden Ihrer eigenen Elementattribute innerhalb einer gültigen Webseite bieten.
Erstellen Sie HTML5 -Dateien:
Wenn Sie nicht herausgefunden haben, welche Sie verwenden sollen, können Sie den folgenden Code kopieren:
<! DocType html>
<html>
<kopf>
<Script>
/*Funktionen hier*/
< /script>
< /head>
<body>
< /body>
< /html>
Stellen Sie benutzerdefinierte Elemente im Körper fest und greifen Sie mit JavaScript -Elementen in einem Teil des Skriptbereichs des Kopfes auf sie zu.
Elemente erstellen:
Fügen Sie zunächst einige einfache Inhalte und benutzerdefinierte Attribute sowie Elemente wie IDs hinzu, damit wir JavaScript -Beispiele erkennen können.
<div id = product1 datenproduktkategorie = kleidung>
Baumwollhemd
</div>
Wie Sie sehen können, befindet sich das benutzerdefinierte Attribut in Form von: Data-*, den Namen im Abschnitt Daten oder den von Ihnen ausgewählten Namen festlegen. Die Verwendung benutzerdefinierter Eigenschaften in HTML5 ist die einzige Möglichkeit, dies zu tun. Wenn Sie also überprüfen möchten, ob die Webseite gültig ist, können Sie diese Methode verwenden.
Natürlich bestimmt der Teil des Projektdetails, ob eine benutzerdefinierte Eigenschaft für Sie nützlich ist und wie sie sie benennt. Dieses Beispiel kann auf Einzelhandelswebsites in verschiedenen Produktkategorien angewendet werden.
Mit benutzerdefinierten Eigenschaften können Sie JavaScript -Code innerhalb der Seite verwenden, um Elemente wie Animationsanzeigefunktionen festzulegen. Wenn es keine Standard -HTML -Elemente gibt, empfehlen wir, benutzerdefinierte Eigenschaften zu verwenden.
Fügen Sie eine Testschaltfläche hinzu
Das Ereignis kann mit seinen eigenen JavaScript -Elementen auf der Seite ausgeführt werden, vorausgesetzt, der folgende Code wird der Seite hinzugefügt:
<Eingabe type = Taste Wert = Anklicken Sie das Attribut onclick = getElementAttribute ('product1')/>
Attribute erhalten:
Die häufigste Möglichkeit, auf Eigenschaften in JavaScript zuzugreifen, besteht darin, GetAttributes zu verwenden. Dies ist auch der erste Schritt, den wir tun müssen. Fügen Sie die folgende Funktion im Kopfskriptbereich der Seite hinzu:
Funktion getElementAttribute (elemid) {
var theelement = document.getElementById (Elemid);
var theattribute = theLement.getAttribute ('Datenproduktkategorie');
Alarm (Theattribute);
}
Hier haben wir dem Beispiel den Alarmwert hinzugefügt, und Sie können ihn natürlich auch in das Skript nach Ihren eigenen Bedürfnissen hinzufügen.
Daten erhalten:
Sie können Elementdatensätze anstelle von DOM -GetArttributes verwenden, was möglicherweise effizienter ist, insbesondere in einigen Fällen, in denen der Code mehrere Attribute durchläuft. Die Unterstützung des Browsers für den Datensatz ist jedoch immer noch sehr niedrig. Wenn Sie dies berücksichtigen, kann dieser Code den gleichen Prozess wie die // Methode dahinter ausführen.
// var theattribute = theLement.getAttribute ('Datenprodukt-Category'); var theattribute = theelement.dataset.ProductCategory;
Daten entfernen- im Datensatz beginnt mit dem Attributnamen, es ist weiterhin in der HTML enthalten.
Beachten Sie, dass bei einem Bindestrich in Ihrem benutzerdefinierten Eigenschaftsnamen das Formular Camel-Case angenommen wird, wenn Sie über die Daten zugegriffen werden, d. H. (Datenproduktkategorie wird zur Produktkategorie).
Andere Module und Funktionen
Wir haben diese Eigenschaft erhalten und das Skript kann weiterhin festgelegt und gelöscht werden. Der folgende Code zeigt, wie Eigenschaften mithilfe von Standard -JavaScript -Modulen und -Datensätzen festgelegt werden.
Sie können auch die DOM -Methode oder den Datensatz verwenden, um ein bestimmtes Attribut zu löschen:
// DOM -Methode
die EINGELEMENT.REMOVEATTRIBUTE ('Datenproduktkategorie');
// Datensatzversion
die EINEL.DATASET.ProductCategory = NULL;
Abschluss:
Die Implementierung benutzerdefinierter Eigenschaften in HTML5 ist technisch nicht kompliziert. Die wirkliche Schwierigkeit ist, ob die Methode, die Sie verwenden, für Ihr Projekt geeignet ist. Wenn ja, wie können Sie es effektiver machen? Bitte denken Sie daran, dass es zu früh ist, um die Datensatzmethode als Seitenfunktion zu aktivieren. Immerhin unterstützen viele Browser diese Funktion nicht.