五个很实用的HTML5接口

1.Element.classList

classList API为JS提供了基本的CSS控制方法,几个基本的方法如下。

// 元素新增新的class名
myElement.classList.add("newClass");

// 删除元素已有的某个class名
myElement.classList.remove("existingClass");

// 判断元素是否包含某个class名
myElement.classList.contains("oneClass");

// toggle方法
myElement.classList.toggle('myCssClass'); //没有则新增
myElement.classList.toggle('myCssClass'); //若存在则删除

关于更多的classList api可以到这篇文章了解。

2.ContextMenu API

ContextMenu API(自定义右键菜单接口)并不是重写浏览器的右键菜单,而是允许你为浏览器原有的菜单上新增一些新的内容。定义的方法如下:

<section contextmenu="mymenu">
<!-- 新增菜单 -->
<menu type="context" id="mymenu">
    <menuitem label="刷新本文" onclick="reload();" icon="xx.png"></menuitem>
    <menuitem label="马上评论" onclick="comment()" icon="xx.png"></menuitem>
</menu>
</section>

对应效果:

ContextMenu接口定义效果

关于更多的ContextMenu api可以到这篇文章了解。

3.Element.dataset

dataset接口让开发者更方便地得到元素的属性值。

假如现在存在如下那样的div,里面自定义了属性

<div id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="This is the value"></div>

在HTML5中可以使用dataset接口进行操作:

//获取元素
var element = document.getElementById("myDiv");

//获取元素data-id的值
var id = element.dataset.id;

//获取元素自定义的长属性值data-my-custom-key,使用驼峰法
var customKey = element.dataset.myCustomKey;

//设置属性值
customKey = "This is the New Value";

关于更多的dataset api可以到这篇文章了解。

4.window.postMessage API

postMessage让windows和IFRAME元素之间进行通信。PS:这个接口其实已经被IE8支持了很多年了。

假如AA.COM页面IFRAME了一个BB.COM的页面。那么他们之间跨域的消息传递可以通过以下方法:

// AA.com的页面对象,给页面里面IFRAME的BB.COM页面传消息
var iframeWindow = document.getElementById("iframe").contentWindow;
iframeWindow.postMessage("Hello from the first window!");

// IFRAME里的BB.COM接受到消息
window.addEventListener("message", function(event) {
  // 先确保来源网站是安全的
  if(event.origin == "http://AA.COM") {
    // 输出来自AA.COM的消息
    console.log(event.data);

    // 回复消息到AA.COM
    event.source.postMessage("Hello back!");
  }
]);

消息格式只能使用字符串哦。

关于更多的window.postMessage API可以到这篇文章了解。

5.自动聚焦属性(autofocus)

autofocus属性让BUTTON,INPUT,TEXTAREA找到了第二春,因为它们设置了这个属性,在页面加载时就能自动聚焦。

针对google,baidu和一些注册页面,autofocus是个好东西。

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

关于更多的autofocus API可以到这篇文章了解。

文章引自Nornor:http://nornor.net/5-html5-apis-you-dont-know.htm

英文原文:《5 HTML5 APIs You Didn’t Know Existed

落花生

认准了方向,就要勇敢地走下去,十年磨一剑,我相信,只要坚持,一切都有可能。

相关日志

  1. 没有图片

    2009.07.20

    WordPress官方开发论坛,最精简最强论坛BBPress发布

    Wordpress 官方最近开发出论坛代码 …

  2. 没有图片

    2013.12.29

    Debian系统下用 vsftpd 配置FTP服务完整教程

    Debian系统下用vsftpd配置FTP服…

  3. 没有图片

    2009.07.26

    几款免费的优秀的图片存放和分享的网站

    大家都知有名的图片存放和分享网站 Picas…

  4. 没有图片

    2010.09.27

    微软安全软件 Microsoft Security Essentials

    通过正版验证的Windows电脑用户,可以免…

  5. 没有图片

    2013.11.04

    如何开启 Windows 8.1 远程桌面

    Windows 8.1 远程桌面默认是被系统…

  6. 没有图片

    2010.09.27

    Word 2010 的功能和优点

    Microsoft Word 2010 提供…

评论

  1. 伊泽 2012.11.18 12:08上午

    最近html5学的疲劳了,学学电子商务。嘿嘿。

  2. 为你牵挂 2012.11.10 10:17下午

    牵挂表示看不懂

  3. 蛋壳 2012.11.08 1:35下午

    HTML 潜力越来越大啦!

  4. 貓殺手 2012.11.04 11:25上午

    表示沒看懂,但是感覺很厲害的樣子!
    :)

    • 菠萝 2012.11.06 10:52上午

      猫不用看懂啊,不写程序没有用。。

About

马拉松运动员,沉迷于跑步;关注科技前沿,关注互联网!与跑者、程序员、设计师为伍,一起跑步健身,一起编写程序,为自由而战!