Kommentar: Wenn Sie in der Menge über "HTML5" sprechen, fühlen Sie sich vielleicht wie ein exotischer Tänzer oder ein Einhorn mit einer klaren Bedeutung von "Ich bin cool, ich weiß es" in die Mitte des Hauses, die in die Mitte des Hauses kommen.
Dies kann nicht gesagt werden, dass wir eitel sind. Die grundlegende HTML -API hat sich in den letzten Jahren nicht entwickelt, sodass wir einen neuartigen Look verleihen, wenn ein kleines neues Feature wie Platzhalter erscheint. Obwohl viele HTML5 -Funktionen in neuen Browsern implementiert sind, wissen die meisten Programmierer immer noch nicht von einigen kleinen, sehr nützlichen APIs. In diesem Artikel werde ich einige solche APIs vorstellen und alle begrüßen, um mehr unbekannte HTML5 -APIs zu entdecken!
Element.ClassList
Die Classlist -API bietet eine grundlegende Funktion zur Steuerung von CSS, die wir im Laufe der Jahre mit der JavaScript -Toolbibliothek implementiert haben:
// Fügen Sie eine CSS -Klasse hinzu
MyElement.classList.add ("NewClass");
// eine CSS -Klasse löschen
MyElement.ClassList.remove ("vorhandeneClass");
// Überprüfen Sie, ob Sie eine CSS -Klasse haben
MyElement.ClassList.Contains ("OneClass");
// Die Existenz oder nicht einer CSS -Klasse umkehren
MyElement.classList.toggle ("AnotherClass");
Der Hauptwert dieser neu aufstrebenden API ist: Einfach und praktisch.
Kontextmenu -API
Diese neue Kontext-API ist sehr nützlich: Sie ersetzt nicht das originale Menü mit der rechten Maustaste, sondern fügt Ihr benutzerdefiniertes Menü mit der rechten Maustaste zum Rechtsklickmenü im Browser hinzu:
<Abschnitt contextMenu = "myMenu">
<!-Menü hinzufügen->
<Menü type = "context">
<Menuitem label = "refresh post" icon = "/bilder/refresh-icon.png"> </Menuitem>
<Menü Label = "Share on ..." icon = "/bilder/Share_icon.gif">
<Menuitem label = "Twitter" icon = "/bilder/twitter_icon.gif"> </Menuitem>
<Menuitem Label = "Facebook" icon = "/bicture/facebook_icon16x16.gif"> </Menuitem>
</Menü>
</Menü>
</Abschnitt>
Es ist zu beachten, dass es am besten ist, JavaScript zu verwenden, um diese Menücodes dynamisch zu erstellen, da das Menüereignis schließlich JavaScript aufruft, um Aufgaben auszuführen. Wenn der Benutzer JavaScript verbietet, wird das Menü mit der rechten Maustaste nicht generiert und er wird das Menü nicht gleichzeitig angezeigt.
Element.dataset
Mit der Dataset-API können Programmierer Daten einfach erwerben oder festlegen-* benutzerdefinierte Eigenschaften:
/* Der folgende Code ist ein Beispiel
<div data-name = "mydiv" data-id = "myid" data-my-custom-key = "Dies ist der Wert"> </div>
*/
// Elemente holen
var element = document.getElementById ("mydiv");
// id id
var id = element.dataset.id;
// Lesen Sie den Wert von "Data-My-Custom-Key"
var customKey = element.dataset.mycustomkey;
// an andere Werte ändern
element.dataset.mycustomkey = "ein anderer Wert";
// sich herausstellen:
// <div data-name = "mydiv" data-id = "myid" data-my-custom-key = "Ein anderer Wert"> </div>
Unnötig zu erwähnen, dass es so einfach und praktisch ist wie die Classlist
Fenster.PostMessage API
Sogar IE8 hat die Postmessage -API seit vielen Jahren unterstützt. Die Funktion der Postmessage -API besteht darin, dass Sie Informationsdaten zwischen zwei Browserfenstern oder Iframes übergeben können:
// senden
var iframeWindow = document.getElementById ("iframe"). ContentWindow;
IframeWindow.PostMessage ("Grüße aus dem ersten Fenster!");
window.addeventListener ("meldung", Funktion (Ereignis) {
// Testen Sie die Legalität der Domäne
if (event.origin == "http://www.vevb.com") {
// Ausgabeprotokollinformationen
console.log (event.data);
// Feedback -Nachricht
event.source.postmessage ("Wie geht es dir gut!");
}
]);
Der Message -Körper kann nur eine Zeichenfolge sein, aber Sie können JSON.Stringify und JSON.Parse verwenden, um Nachrichten in aussagekräftigere Datenkörper umzuwandeln!
Autofokusattribut
Das AutoFocus -Attribut kann Schaltfläche, Eingabe- oder Textbereichselemente erstellen, wenn die Seite geladen wird:
<Eingabe autofocus = "Autofocus" />
<button autofocus = "autofocus"> hi! </button>
<textarea autofocus = "autofocus"> </textArea>
An Stellen wie Google -Suchseiten mit festen Mustern ist die Autofocus -Eigenschaft die ideale Funktion.
Der Browser unterstützt jede API etwas anders. Überprüfen Sie die Unterstützung für diese Funktionen, bevor Sie sie verwenden. Nehmen Sie sich etwas Zeit, um die detaillierte Beschreibung jeder API zu lesen, und ich glaube, Sie werden mehr finden.