html5中几个不容错过的api或者tips小结

当前位置 : 首页 > 网页制作 > 心得技巧 > html5中几个不容错过的api或者tips小结

html5中几个不容错过的api或者tips小结

来源:互联网 作者:脚本宝典 时间:2015-09-05 12:53
之前的博文中,一直有关注一些HTML 5中的值得关注但少用的API或者tips,这次继续小结一些。 1)element.classList 详细的可以参考 https://developer.mozilla.org/en-US/docs/DOM/element.classList 这里简单说

之前的博文中,一直有关注一些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的,用来可以生成简单的可以点击的上下文菜单,能给用户快速的选择和显示,比如 

复制代码

代码如下:


<section contextmenu="mymenu"> 
<!-- 
For the purpose of cleanliness, 
I'll put my menu inside the element that will use it 
--> 
<!-- add the menu --> 
<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> 


3)element.dataset 
这个API用来获得键值对的时候很有用: 
比如: 

复制代码

代码如下:


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


则通过下面这些可以获得键值对,这个用在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到控件 

复制代码

代码如下:


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


Tag:

相关文章

网友评论

<