你不知道道的5个HTML5新作用

日期：2021-02-27 类型：科技新闻 

关键词：如何织梦建站，如何创建网站，网站建立，公众号搭建，网站建站的

当你在群体中讨论到“HTML5”，你或许会觉得到，自身像1位异域舞者或独角兽，来到屋子正中间，带有显著的“我很酷，我了解它”的意味。这不可以说大家虚荣，是多少年来，基础的HTML API1直沒有任何发展趋势，以致于当有1个小的新作用出現时，比如placeholder，都会让大家露出奇特的眼神。虽然新型的访问器中完成了许多HTML5特点，但绝大多数程序流程员仍对1些小的、十分有效的API不上解或从未听闻。本文中我将详细介绍1些这样的API，并欢迎大伙儿挖掘出更多鲜为人知的HTML5 API！

Element.classList

classList API出示了大家多年来1种应用JavaScript专用工具库来完成的操纵CSS的基础作用：

XML/HTML Code拷贝內容到剪贴板
  1. // 提升1个CSS类   
  2. myElement.classList.add("newClass");   
  3.   
  4. // 删掉1个CSS类   
  5. myElement.classList.remove("existingClass");   
  6.   
  7. // 查验是不是有着1个CSS类   
  8. myElement.classList.contains("oneClass");   
  9.   
  10. // 翻转1个CSS类的有没有   
  11. myElement.classList.toggle("anotherClass");   

这个新出現的API的关键使用价值反映便是：简易好用。读1下这篇文章内容，里边详细介绍了其它几个classList作用特点。

ContextMenu API

这个新的ContextMenu API十分的有效：它其实不会更换原来的右键菜单，而是将你的自定右键菜单加上到访问器的右键菜单里：

XML/HTML Code拷贝內容到剪贴板
  1. <section contextmenu="mymenu">  
  2.   
  3.   <!-- 加上菜单 -->  
  4.   <menu type="context" id="mymenu">  
  5.    <menuitem label="Refresh Post" onclick="window.location.reload();" icon="/images/refresh-icon.png"></menuitem>  
  6.    <menu label="Share on..." icon="/images/share_icon.gif">  
  7.      <menuitem label="Twitter" icon="/images/twitter_icon.gif" onclick="goTo('//twitter.com/intent/tweet?text=' + document.title + ':  ' + window.location.href);"></menuitem>  
  8.      <menuitem label="Facebook" icon="/images/facebook_icon16x16.gif" onclick="goTo('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem>  
  9.    </menu>  
  10.  </menu>  
  11. </section>  

必须留意的是，最好是应用JavaScript动态性的建立这些菜单编码，由于菜单恶性事件最后要启用JavaScript实行每日任务，假如客户严禁了JavaScript，右键菜单也不容易转化成，他另外也不容易看到菜单。

Element.dataset

应用dataset API，程序流程员能够便捷的获得或设定data-*自定特性：

XML/HTML Code拷贝內容到剪贴板
  1. /*  下列面的编码为例   
  2.   
  3.  <div id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="This is the value"></div>  
  4.   
  5. */   
  6.   
  7. // 获得元素   
  8. var element = document.getElementById("myDiv");   
  9.   
  10. // 获得id   
  11. var id = element.dataset.id;   
  12.   
  13. // 载入 "data-my-custom-key" 的值   
  14. var customKey = element.dataset.myCustomKey;   
  15.   
  16. // 改动成其它值   
  17. element.dataset.myCustomKey = "Some other value";   
  18.   
  19.  // 結果是：   
  20.  //    <div id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="Some other value"></div>  
  21.   

不用多说，跟classList1样，简易好用

window.postMessage API

即便是IE8也对postMessage API适用多年了，postMessage API的作用是可让你在两个访问器对话框或iframe之间传送信息内容数据信息：

JavaScript Code拷贝內容到剪贴板
  1. // 从A域上的对话框或iframe，推送1条信息内容到B域中的对话框或ifame   
  2. var iframeWindow = document.getElementById("iframe").contentWindow;   
  3. iframeWindow.postMessage("来自第1个对话框的问候!");   
  4.   
  5. // 在第2个不一样域上的对话框或iframe接受信息   
  6. window.addEventListener("message", function(event) {   
  7.  // 检测域的合理合法性   
  8.  if(event.origin == "http://www.webhek.com") {   
  9.   // 輸出系统日志信息内容   
  10.   console.log(event.data);   
  11.   
  12.   // 意见反馈信息   
  13.   event.source.postMessage("你也好吗!");   
  14.  }   
  15. ]);   
  16.   

信息体只能是标识符串，但你能够用JSON.stringify和JSON.parse将信息变换成更成心义的数据信息体！

autofocus特性

autofocus特性可以让BUTTON, INPUT, 或 TEXTAREA元素在网页页面载入进行时全自动变成网页页面聚焦点：

XML/HTML Code拷贝內容到剪贴板
  1. <input autofocus="autofocus" />  
  2. <button autofocus="autofocus">Hi!</button>  
  3. <textarea autofocus="autofocus"></textarea>  

在像谷歌检索网页页面那样的有固定不动方式的地区，autofocus特性是最理想化的1个作用。

访问器对各个API的适用稍有不一样，因此，在应用前先查验1下对这些特点的适用状况。再花点時间阅读文章1下各个API的详尽表明，坚信你会有更多的发现。

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。
上一篇：HTML5边玩边学（1）画布完成方式 返回下一篇：没有了