5个你不知道的HTML5的接口介绍_html5教程技巧
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了5个你不知道的HTML5的接口介绍_html5教程技巧,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含4076字,纯文字阅读大概需要6分钟。
内容图文
![5个你不知道的HTML5的接口介绍_html5教程技巧](/upload/InfoBanner/zyjiaocheng/391/3c427059de5442208ce15f7527835612.jpg)
原文日期: 2010年09月27日
翻译日期: 2013年8月7日
当人们看到或者说出"HTML5"这个词的时候,估计至少有一半以上的人,会联想到她既是一个性感而又充满魅力的美女,同时也是一只能把你搞得焦头烂额的独角兽,这能怪我们这些开发者吗?
我们注意到那些基础的Api停滞发展了如此漫长的时间(大概是1999-2009),以至于像"placeholder"这样基础的一个附加功能,也要花费我们不短的时间来处理。
尽管当前的主流浏览器已经实现了很多的HTML5新特性,但是很多开发者根本就没注意到这些更简洁,也很有用的API。
本系列文章介绍这些接口API,同时也希望能鼓励更多开发者去探索那些还不广为人知的API。
Element.classList
这个属性已经发布了好几年,通过classList,我们可以通过JavaScript来操纵底层css的class属性.
代码如下:
// 使用classList属性(Dom元素,css类名)
function toggleClassList(element,cName){
// 1. classList API
// 切换类,有则移除,没有则添加
if(element.classList.toggle){
element.classList.toggle(cName);
return true;
}
// !!! 其实,本函数 toggleClassList 如果支持的话,
// 那么下面的代码就不会被执行,此处仅作演示,请灵活应用
// 2. classList API
// element 的class属性是否包含 hide 这个CSS类
var hasHide = element.classList.contains(cName);
//
if(hasHide){
// 3. classList API
// 移除hide类
element.classList.remove(cName);
} else {
// 4. classList API
// 添加hide类
element.classList.add(cName);
}
return true;
};
ContextMenu API
经测试chrome28不管用。。。
新的API,ContextMenu 是极好的接口: 此接口允许你很简单地添加菜单项到浏览器的上下文菜单(右键菜单),而不是去覆盖浏览器的默认右键菜单。
需要注意的是,你最好采用js脚本来动态的创建菜单contextmenu,这样可以避免页面禁用JS脚本的情况 下出现多余的HTML代码。
代码如下:
点击此区域查看菜单
Element.dataset
数据集(dataset) API 允许开发者对DOM元素设置(set)和获取(get) 以 data- 前缀开头的属性值。
代码如下:
function testDataset(){
//
var intro = document.getElementById("intro");
// 注意这个不是 id属性哦,是 data-id 的值
var id = intro.dataset.id;
// data-website
var website = intro.dataset.website;
// data-blog-url,驼峰命名法..
var blogUrl = intro.dataset.blogUrl;
// data-my-name
var myName = intro.dataset.myName;
//
var msg = "qq:"+id
+",website:"+website
+",blogUrl:"+blogUrl
+",myName:"+myName
;
//
warn(msg);
};
没有什么好说的,和classList一样,简单却实用。(想一想,是否改变了后台和前台JS的某些交互以及解耦?)
window.postMessage API
IE8 已经支持 postMessage API 好几年了,此API允许window 和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) {
// Make sure we trust the sending domain
if(event.origin == "http://davidwalsh.name") {
// Log out the message
console.log(event.data);
// Send a message back
event.source.postMessage("Hello back!");
}
]);
// message 只允许string 类型的数据,然而您可以使用 JSON.stringify 以及 JSON.parse 传递更多有意义的消息。
autofocus Attribute
autofocus 属性确保当页面加载后,给定的 BUTTON,INPUT或者 TEXTAREA 元素能够自动获得焦点。
autofocus 属性主要用在简单的输入页面,详情请参考:autofocus 属性
各浏览器厂商对这些API的支持度各不相同,所以在使用之前最好检测一下兼容性,花一些时间来阅读上面所列出的API,您将会对他们了解和掌握更多。
部分的测试代码如下:
内容总结
以上是互联网集市为您收集整理的5个你不知道的HTML5的接口介绍_html5教程技巧全部内容,希望文章能够帮你解决5个你不知道的HTML5的接口介绍_html5教程技巧所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。