五个很实用的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. 没有图片

    2011.01.02

    老毛桃PE维护系统 09.16完美XP光盘版

    软件分类:系统辅助 运行环境:WinXP/2…

  2. 没有图片

    2009.08.26

    我看好的个人博客平台 PivotX

    现在大家都在使用 WordPress 来做个…

  3. 没有图片

    2009.09.09

    关于Google Checkout

    今天打开一个英文站 Mylife ,在浏览这…

  4. 没有图片

    2009.10.26

    Mozilla Weave -Mozilla官方发布书签同步插件

    以前一直使用Xmarks书签同步工具来存储我…

  5. 没有图片

    2013.12.29

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

    Debian系统下用vsftpd配置FTP服…

  6. 没有图片

    2013.12.07

    Windows 8.1激活信息备份&还原方法详细教程

    备份方法: 1、记下激活使用的密钥。 2、复…

评论

  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

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