html5中几个不容错过的api或者tips小结（html5提供的api有）

之前的博文中，一直有关注一些HTML 5中的值得关注但少用的API或者tips，这次继续小结一些。

1)element.classList

详细的可以参考

https://developer.mozilla.org/en-US/docs/DOM/element.classList

这里简单说下，它其实是一个快速对某个元素的class进行操作的新的DOM API了，比如

包括了add,remove，toggle,contains的方法，比如

myDiv.classList.add('myCssClass');

myDiv.classList.remove('myCssClass');

myDiv.classList.toggle('myCssClass'); //now it's added

myDiv.classList.toggle('myCssClass'); //now it's removed

myDiv.classList.contains('myCssClass'); //returns true or false

现在的浏览器支持情况为：

chrome 8.0+,ie 10,opera 11.5,safari 5.1

2)ContextMenu 上下文菜单 API

这个API是HTML 5的，用来可以生成简单的可以点击的上下文菜单，能给用户快速的选择和显示，比如

复制代码代码如下:

3)element.dataset

这个API用来获得键值对的时候很有用：

比如：

复制代码代码如下:

则通过下面这些可以获得键值对，这个用在jquery mobile中很实用：

复制代码代码如下:

// 获得元素 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";

4)postMessage API

这个居然在IE 8后就支持了，可以支持在不同domain的iframe中传递消息

复制代码代码如下:

// From window or frame on domain 1, send a message to the iframe which hosts another domain var iframeWindow = document.getElementById("iframe").contentWindow; iframeWindow.postMessage("Hello from the first window!"); // From inside the iframe on different host, receive message window.addEventListener("message", function(event) { if(event.origin == "http://davidwalsh.name") { // Log out the message console.log(event.data); // Send a message back event.source.postMessage("Hello back!"); } ]);

5)autofocus

这个很简单了，自动focus到控件

复制代码代码如下:

Hi!

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。