HTML5中5个简易好用的API

日期:2020-09-17 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

这不可以说大家虚荣,是多少年来,基础的HTML API1直沒有任何发展趋势,以致于当有1个小的新作用出現时,比如placeholder,都会让大家露出奇特的眼神。虽然新型的访问器中完成了许多HTML5特点,但绝大多数程序流程员仍对1些小的、十分有效的API不上解或从未听闻。本文中我将详细介绍1些这样的API,并欢迎大伙儿挖掘出更多鲜为人知的HTML5 API!

Element.classList

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

拷贝编码
编码以下:

// 提升1个CSS类
myElement.classList.add("newClass");
// 删掉1个CSS类
myElement.classList.remove("existingClass");
// 查验是不是有着1个CSS类
myElement.classList.contains("oneClass");
// 翻转1个CSS类的有没有
myElement.classList.toggle("anotherClass");

这个新出現的API的关键使用价值反映便是:简易好用。

ContextMenu API

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


拷贝编码
编码以下:

<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('//twitter.com/intent/tweet?text=' + document.title + ': ' + window.location.href);"></menuitem>
<menuitem label="Facebook" icon="/images/facebook_icon16x16.gif" onclick="goTo('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem>
</menu>
</menu>
</section>

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

Element.dataset

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


拷贝编码
编码以下:

/* 下列面的编码为例
<div id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="This is the value"></div>
*/
// 获得元素
var element = document.getElementById("myDiv");
// 获得id
var id = element.dataset.id;
// 载入 "data-my-custom-key" 的值
var customKey = element.dataset.myCustomKey;
// 改动成其它值
element.dataset.myCustomKey = "Some other value";
// 結果是:
// <div id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="Some other value"></div>

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

window.postMessage API

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

拷贝编码
编码以下:

// 从A域上的对话框或iframe,推送1条信息内容到B域中的对话框或ifame
var iframeWindow = document.getElementById("iframe").contentWindow;
iframeWindow.postMessage("来自第1个对话框的问候!");</p> <p>// 在第2个不一样域上的对话框或iframe接受信息
window.addEventListener("message", function(event) {
// 检测域的合理合法性
if(event.origin == "https://www.jb51.net") {
// 輸出系统日志信息内容
console.log(event.data);
// 意见反馈信息
event.source.postMessage("你也好吗!");
}
]);

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

autofocus特性

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

拷贝编码
编码以下:

<input autofocus="autofocus" />
<button autofocus="autofocus">Hi!</button>
<textarea autofocus="autofocus"></textarea>

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

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