五个很实用的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.12.02

    WordPress 2.9 Beta2发布公测

    WordPress 2.8.6刚 发布不久,…

  2. 没有图片

    2010.01.30

    精选100个设计模板、代码、工具资源站

    20年来,开源设计模式促进了网页设计的发展,…

  3. 没有图片

    2009.10.14

    DedeCMS自定义模型生成列表出错解决办法

    今天在设置DedeCMS5.5模板,因为以前…

  4. 没有图片

    2010.07.30

    WordPress 3.0.1正式版发布

    今日登陆后台发现WordPress 3.0.…

  5. 没有图片

    2013.08.28

    WordPress主题 NewsPlus 安装使用教程

    很多朋友都在使用我发布的原版汉化作品 New…

  6. 没有图片

    2010.03.25

    Adobe Creative Suite 5 | Adobe CS5 将于2010年4月12日发布

    一直用着Adobe 公司的CS3系列,Ado…

评论

  1. 伊泽 2012.11.18 12:08上午

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