HTML5中5个简单实用的API


Posted in HTML / CSS onApril 28, 2014

这不能说我们虚荣,多少年来,基本的HTML API一直没有任何发展,以至于当有一个小的新功能出现时,例如placeholder,都会让我们露出新奇的眼神。尽管新式的浏览器中实现了很多HTML5特征,但大部分程序员仍对一些小的、非常有用的API不了解或从未听说。本文中我将介绍一些这样的API,并欢迎大家发掘出更多不为人知的HTML5 API!

Element.classList

classList API提供了我们多年来一种使用JavaScript工具库来实现的控制CSS的基本功能:

复制代码
代码如下:

// 增加一个CSS类
myElement.classList.add("newClass");
// 删除一个CSS类
myElement.classList.remove("existingClass");
// 检查是否拥有一个CSS类
myElement.classList.contains("oneClass");
// 反转一个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>

无需多说,跟classList一样,简单实用

window.postMessage API

即使是IE8也对postMessage API支持多年了,postMessage API的功能是可以让你在两个浏览器窗口或iframe之间传递信息数据:

复制代码
代码如下:

// 从A域上的窗口或iframe,发送一条信息到B域中的窗口或ifame
var iframeWindow = document.getElementById("iframe").contentWindow;
iframeWindow.postMessage("来自第一个窗口的问候!");</p> <p>// 在第二个不同域上的窗口或iframe接收消息
window.addEventListener("message", function(event) {
// 检验域的合法性
if(event.origin == "https://3water.com") {
// 输出日志信息
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属性是最理想的一个功能。

浏览器对各个API的支持稍有不同,所以,在使用前先检查一下对这些特征的支持情况。再花点时间阅读一下各个API的详细说明,相信你会有更多的发现。

HTML / CSS 相关文章推荐
使用CSS3的appearance属性改变任何元素的浏览器默认风格
Dec 24 HTML / CSS
纯css3实现走马灯效果
Dec 26 HTML / CSS
css3 border旋转时的动画应用
Jan 22 HTML / CSS
CSS3实现图片抽屉式效果的示例代码
Nov 06 HTML / CSS
使用html5制作loading图的示例
Apr 14 HTML / CSS
利用HTML5绘制点线面组成的3D图形的示例
May 12 HTML / CSS
HTML5 Canvas入门学习教程
Mar 17 HTML / CSS
HTML5+css3:3D旋转木马效果相册
Jan 03 HTML / CSS
Html5之title吸顶功能
Jun 04 HTML / CSS
Canvas图片分割效果的实现
Jul 29 HTML / CSS
HTML利用九宫格原理进行网页布局
Mar 13 HTML / CSS
html form表单基础入门案例讲解
Jul 15 HTML / CSS
会走动的图形html5时钟示例
Apr 27 #HTML / CSS
html5定位并在百度地图上显示的示例
Apr 27 #HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
Apr 23 #HTML / CSS
HTML5的download属性详细介绍和使用实例
Apr 23 #HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
Apr 23 #HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
Apr 23 #HTML / CSS
HTML5中的Scoped属性使用实例
Apr 23 #HTML / CSS
You might like
PHP Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
javascript第一课
2007/02/27 Javascript
JavaScript CSS菜单功能 改进版
2008/12/20 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
2011/04/27 Javascript
js如何实现设计模式中的模板方法
2013/07/23 Javascript
Js操作树节点自动折叠展开的几种方法
2014/05/05 Javascript
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
node.js中的fs.utimes方法使用说明
2014/12/15 Javascript
基于jquery实现发送文章到手机的代码
2014/12/26 Javascript
Node.js返回JSONP详解
2016/05/18 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
js CSS3实现卡牌旋转切换效果
2017/07/04 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
详解使用create-react-app添加css modules、sasss和antd
2018/07/31 Javascript
Javascript实现秒表倒计时功能
2018/11/17 Javascript
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
微信小程序地图实现展示线路
2020/07/29 Javascript
python解析模块(ConfigParser)使用方法
2013/12/10 Python
理解python多线程(python多线程简明教程)
2014/06/09 Python
python获取外网ip地址的方法总结
2015/07/02 Python
Python爬虫实例爬取网站搞笑段子
2017/11/08 Python
详解python项目实战:模拟登陆CSDN
2019/04/04 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
Html5实现如何在两个div元素之间拖放图像
2013/03/29 HTML / CSS
水果花束:Fruit Bouquets
2017/12/20 全球购物
介绍一下Transact-SQL中SPACE函数的用法
2015/09/01 面试题
数控技术专业推荐信
2013/11/01 职场文书
七年级数学教学反思
2014/01/22 职场文书
致长跑运动员广播稿
2014/01/31 职场文书
动员大会主持词
2014/03/20 职场文书
个人整改措施书面材料
2014/10/24 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
JS精髓原型链继承及构造函数继承问题纠正
2022/06/16 Javascript