5 nouvelles fonctionnalités HTML5 que vous ne connaissiez pas-Tutoriel H5-php.cn

5 nouvelles fonctionnalités HTML5 que vous ne connaissiez pas

黄舟

Libérer： 2017-03-13 17:15:11

original

2016 Les gens l'ont consulté

Cet article présente principalement plusieurs nouvelles fonctionnalités de HTML5 que vous ne connaissez pas en détail, et partage avec vous d'autres API HTML5 inconnues, auxquelles les amis intéressés peuvent se référer

Lorsque vous parlez de "HTML5" dans une foule, vous pouvez vous sentir comme une danseuse exotique ou une licorne, venant au milieu de la pièce, avec une nuance distincte "Je suis cool, je le sais". On ne peut pas dire que cela soit une vanité de notre part. Depuis de nombreuses années, l'API HTML de base n'a connu aucun développement, de sorte que lorsqu'une petite nouvelle fonctionnalité apparaît, comme un espace réservé, elle nous donne un aspect nouveau. Bien que de nombreuses fonctionnalités HTML5 soient implémentées dans les navigateurs modernes, la plupart des programmeurs ne connaissent toujours pas ou n'ont jamais entendu parler de certaines petites API très utiles. Dans cet article, je présenterai certaines de ces API et inviterai tout le monde à découvrir d'autres API HTML5 inconnues !

Element.classList

L'API classList fournit la fonctionnalité de base de contrôle CSS que nous avons implémentée à l'aide de bibliothèques d'outils JavaScript depuis de nombreuses années :

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

Copier après la connexion

Cette nouvelle API La valeur principale l'expression est : simplicité et praticité. Lisez cet article, qui présente plusieurs autres fonctionnalités de classList.

API ContextMenu

Cette nouvelle API ContextMenu est très utile : elle ne remplace pas le menu contextuel d'origine, mais ajoute votre menu contextuel personnalisé. Accédez au menu contextuel du navigateur :

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>

Copier après la connexion

Il convient de noter qu'il est préférable d'utiliser JavaScript pour créer dynamiquement ces codes de menu, car l'événement de menu finira par appeler JavaScript pour effectuer la tâche. Si l'utilisateur désactive JavaScript, le menu contextuel s'affichera. ne sera pas généré. Il également Vous ne verrez pas le menu non plus.

Element.dataset

À l'aide de l'API de l'ensemble de données, les programmeurs peuvent facilement obtenir ou définir des

attributs de données personnalisés :

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>

Copier après la connexion

Pas besoin d'en dire plus , comme classList, simple et pratique

API window.postMessage

Même IE8 prend en charge l'API postMessage depuis de nombreuses années. La fonction de l'API postMessage vous permet de transférer des données d'information. entre les fenêtres du navigateur ou les 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("你也好吗!");   
 }   
]);

Copier après la connexion

Le corps du message ne peut être que

String, mais vous pouvez utiliser JSON.stringify et JSON analyse le message en un. un corps de données plus significatif !

Attribut autofocus

L'attribut autofocus permet aux éléments BUTTON, INPUT ou TEXTAREA de devenir automatiquement le focus de la page lorsque la page est chargée :

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

Copier après la connexion

dans une page de recherche comme Google Where le mode est fixe, l'attribut autofocus est la fonctionnalité la plus idéale.

La prise en charge du navigateur pour chaque API est légèrement différente, alors vérifiez la prise en charge de ces fonctionnalités avant de l'utiliser. Prenez le temps de lire la description détaillée de chaque API, je pense que vous en trouverez plus.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!