5 neue Funktionen in HTML5, von denen Sie noch nichts wussten

Dieser Artikel stellt hauptsächlich einige neue Funktionen von HTML5 vor, die Sie nicht im Detail kennen, und teilt Ihnen unbekanntere HTML5-API mit, auf die sich interessierte Freunde beziehen können

Wenn Sie in einer Menschenmenge über „HTML5“ sprechen, kommen Sie sich möglicherweise wie ein exotischer Tänzer oder ein Einhorn vor, das mit einem deutlichen „Ich bin cool, ich weiß es“-Unterton in die Mitte des Raums kommt. Das kann nicht als eitel von uns bezeichnet werden. Die grundlegende HTML-API wurde viele Jahre lang nicht weiterentwickelt, so dass wir neuartig aussehen, wenn eine kleine neue Funktion wie ein Platzhalter erscheint. Obwohl viele HTML5-Funktionen in modernen Browsern implementiert sind, kennen die meisten Programmierer immer noch nicht einige kleine, sehr nützliche APIs oder haben noch nie davon gehört. In diesem Artikel werde ich einige solcher APIs vorstellen und jeden dazu einladen, weitere unbekannte HTML5-APIs zu entdecken!

Element.classList

Die classList-API bietet die grundlegende Funktionalität zur Steuerung von CSS, die wir seit vielen Jahren mithilfe von JavaScript-Toolbibliotheken implementiert haben:

XML/HTML Code复制内容到剪贴板
// 增加一个CSS类   
myElement.classList.add("newClass");   
  
// 删除一个CSS类   
myElement.classList.remove("existingClass");   
  
// 检查是否拥有一个CSS类   
myElement.classList.contains("oneClass");   
  
// 反转一个CSS类的有无   
myElement.classList.toggle("anotherClass");

• 
  

Diese neue API Der Hauptwert Ausdruck ist: Einfachheit und Praktikabilität. Lesen Sie diesen Artikel, der mehrere andere classList-Funktionen vorstellt.

ContextMenu API

Diese neue ContextMenu API ist sehr nützlich: Sie ersetzt nicht das ursprüngliche Rechtsklick-Menü, sondern fügt Ihr benutzerdefiniertes Rechtsklick-Menü hinzu. Gehe zu Rechtsklick-Menü des Browsers:

XML/HTML Code复制内容到剪贴板
<section contextmenu="mymenu">  
  
  <!-- 添加菜单 -->  
  <menu type="context" id="mymenu">  
   <menuitem label="Refresh Post" onclick="window.location.reload();" icon="/images/refresh-icon.png"></menuitem>  
   <menu label="Share on..." icon="/images/share_icon.gif">  
     <menuitem label="Twitter" icon="/images/twitter_icon.gif" 
     onclick="goTo(&#39;//twitter.com/intent/tweet?text=&#39; + document.title + &#39;:  &#39; + window.location.href);"></menuitem>  
     <menuitem label="Facebook" icon="/images/facebook_icon16x16.gif" 
     onclick="goTo(&#39;//facebook.com/sharer/sharer.php?u=&#39; + window.location.href);"></menuitem>  
   </menu>  
 </menu>  
</section>

• 
  

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 die Aufgabe auszuführen. Wenn der Benutzer JavaScript deaktiviert, wird dies über das Rechtsklickmenü geschehen Er wird auch nicht generiert. Das Menü wird auch nicht angezeigt.

Element.dataset

Mithilfe der Datensatz-API können Programmierer ganz einfach Daten-*benutzerdefinierte

Attribute abrufen oder festlegen:

XML/HTML Code复制内容到剪贴板
/*  以下面的代码为例   
  
 <p id="myp" data-name="myp" data-id="myId" data-my-custom-key="This is the value"></p>  
  
*/   
  
// 获取元素   
var element = document.getElementById("myp");   
  
// 获取id   
var id = element.dataset.id;   
  
// 读取 "data-my-custom-key" 的值   
var customKey = element.dataset.myCustomKey;   
  
// 修改成其它值   
element.dataset.myCustomKey = "Some other value";   
  
 // 结果是：   
 //    <p id="myp" data-name="myp" data-id="myId" data-my-custom-key="Some other value"></p>

• 
  

Mehr muss man nicht sagen , wie classList, einfach und praktisch

window.postMessage API

Sogar IE8 unterstützt die PostMessage-API seit vielen Jahren. Mit der Funktion der PostMessage-API können Sie Informationsdaten übertragen zwischen Browserfenstern oder Iframes:

JavaScript Code复制内容到剪贴板
// 从A域上的窗口或iframe，发送一条信息到B域中的窗口或ifame   
var iframeWindow = document.getElementById("iframe").contentWindow;   
iframeWindow.postMessage("来自第一个窗口的问候!");   
  
// 在第二个不同域上的窗口或iframe接收消息   
window.addEventListener("message", function(event) {   
 // 检验域的合法性   
 if(event.origin == "http://www.webhek.com") {   
  // 输出日志信息   
  console.log(event.data);   
  
  // 反馈消息   
  event.source.postMessage("你也好吗!");   
 }   
]);

• 
  

Der Nachrichtentext kann nur aus

String bestehen, aber Sie können JSON verwenden.stringify und JSON parse konvertieren die Nachricht in einen aussagekräftigerer Datenkörper!

Autofokus-Attribut

Das Autofokus-Attribut ermöglicht, dass BUTTON-, INPUT- oder TEXTAREA-Elemente automatisch zum Seitenfokus werden, wenn die Seite geladen wird:

XML/HTML Code复制内容到剪贴板
<input autofocus="autofocus" />  
<button autofocus="autofocus">Hi!</button>  
<textarea autofocus="autofocus"></textarea>

• 
  

auf einer Suchseite wie Google Where Der Modus ist fest, das Autofokus-Attribut ist die idealste Funktion.

Die Browserunterstützung für jede API unterscheidet sich geringfügig. Überprüfen Sie daher die Unterstützung für diese Funktionen, bevor Sie sie verwenden. Nehmen Sie sich etwas Zeit, um die detaillierte Beschreibung jeder API zu lesen. Ich glaube, Sie werden mehr finden.

Das obige ist der detaillierte Inhalt von5 neue Funktionen in HTML5, von denen Sie noch nichts wussten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!