Heim >Web-Frontend >H5-Tutorial >Einführung in 5 HTML5-Schnittstellen, die Sie nicht kennen. HTML5-Tutorial-Kenntnisse
Einführung in 5 HTML5-Schnittstellen, die Sie nicht kennen. HTML5-Tutorial-Kenntnisse
- WBOYOriginal
- 2016-05-16 15:48:581961Durchsuche
Ursprüngliche Adresse: 5 HTML5-APIs, von deren Existenz Sie nicht wussten
Ursprüngliches Datum: 27. September 2010
Übersetzungsdatum: 7. August 2013
Wenn Leute sehen oder wenn das Wort „HTML5 „Es wird geschätzt, dass mindestens die Hälfte der Menschen sie für eine sexy und bezaubernde Schönheit hält, aber auch für ein Einhorn, das einen unglücklich machen kann. Kein Wunder, dass wir Entwickler sind?“
Uns ist aufgefallen, dass die Basis-APIs schon so lange stagnieren (wahrscheinlich 1999-2009), dass selbst die Verarbeitung einer einfachen Zusatzfunktion wie „Platzhalter“ lange dauern wird.
Obwohl die aktuellen Mainstream-Browser viele neue HTML5-Funktionen implementiert haben, haben viele Entwickler diese einfacheren und nützlicheren APIs einfach nicht bemerkt.
Diese Artikelserie stellt diese Schnittstellen-APIs vor und hofft auch, mehr Entwickler dazu zu ermutigen, APIs zu erkunden, die noch nicht allgemein bekannt sind.
Element.classList
Dieses Attribut wird seit mehreren Jahren veröffentlicht. Über classList können wir das Klassenattribut des zugrunde liegenden CSS über JavaScript bearbeiten.
Der Code lautet wie folgt:
// Verwenden Sie das classList-Attribut ( Dom-Element, CSS-Klassenname)
function toggleClassList(element,cName){
// 1. classList API
// Wechseln Sie die Klasse, entfernen Sie sie, wenn sie vorhanden ist, fügen Sie sie hinzu, wenn sie nicht vorhanden ist
if(element.classList.toggle){
element .classList.toggle(cName);
return true;
// !!! Tatsächlich, wenn diese Funktion toggleClassList unterstützt wird ,
// dann wird der folgende Code nicht ausgeführt. Dies dient nur der Demonstration, bitte verwenden Sie ihn flexibel
// 2. classList API
// Ob das Klassenattribut des Elements diese CSS-Klasse enthält
var hasHide = element.classList.contains(cName);
//
if(hasHide){
// 3. classList API
// Ausblenden der Klasse
element entfernen. classList.remove(cName);
} else {
// 4. classList API
// Add hide class
element.classList.add(cName);
return true;
};
Nach dem Test funktioniert chrome28 nicht. . .
Die neue API, ContextMenu, ist eine hervorragende Schnittstelle: Mit dieser Schnittstelle können Sie ganz einfach Menüelemente zum Kontextmenü des Browsers (Rechtsklick-Menü) hinzufügen, anstatt das Standard-Rechtsklick-Menü des Browsers zu überschreiben. Es ist zu beachten, dass Sie besser ein JS-Skript verwenden sollten, um das Menü-Kontextmenü dynamisch zu erstellen, um redundanten HTML-Code zu vermeiden, wenn die Seite JS-Skript deaktiviert.
Der Code lautet wie folgt: