HTML5中的实用API
来源:互联网 发布:投资大师软件 编辑:程序博客网 时间:2024/06/01 08:49
classList API提供了一个CSS控制器,而这功能以前都是通过JavaScript实现的:
- // Add a class to an element
- myElement.classList.add("newClass");
- // Remove a class to an element
- myElement.classList.remove("existingClass");
- // Check for existence
- myElement.classList.contains("oneClass");
- // Toggle a class
- myElement.classList.toggle("anotherClass");
该API最大的优点是:简单和智能,阅读这篇文章了解更多的classList属性。
ContextMenu API
ContextMenu API是一个非常出色的菜单API,无需重写浏览器上下文菜单即可把item添加到浏览器菜单中,非常简单、方便。
- <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>
备注:最好使用JavaScript创建菜单标记,因为item的动作还是由JavaScript执行,如果JavaScript被关闭那么留一个不能执行的菜单也没用。
Element.dataset
dataset这个API可以帮助开发人员轻松获取(get)或设置(set)数据属性值:
- /* Assuming element:
- <div id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="This is the value"></div>
- */
- // Get the element
- var element = document.getElementById("myDiv");
- // Get the id
- var id = element.dataset.id;
- // Retrieves "data-my-custom-key"
- var customKey = element.dataset.myCustomKey;
- // Sets the value to something else
- element.dataset.myCustomKey = "Some other value";
- // Element becomes:
- // <div id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="Some other value"></div>
无需多说,和classList一样,简单有效。
window.postMessage API
IE8很早就开始支持postMessage API,它允许消息在windows和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!");
- }
- ]);
消息只能是字符串类型,使用JSON.stringify和JSON.parse可以解析更多有意义的数据。
autofocus Attribute
当页面完成时,autofocus(自动对焦)属性可以帮助一个给定的Button、Input或TextArea元素自动获取焦点。
- <input autofocus="autofocus" />
- <button autofocus="autofocus">Hi!</button>
- <textarea autofocus="autofocus"></textarea>
- HTML5中的实用API
- shlwapi.dll中的实用API函数
- HTML5中的地理定位API(Geolocation)
- 【HTML5】Web开发者的最爱 5个超实用的HTML5 API
- 实用API
- 实用API
- html5 api
- Web开发者的最爱 5个超实用的HTML5 API
- Web开发者的最爱 5个超实用的HTML5 API
- Web开发者的最爱 5个超实用的HTML5 API
- 实用的HTML5资源
- HTML5实用例子
- Dojo实用API
- 实用API大全
- 实用API大全
- js实用api收藏
- matlab 实用 api
- API实用设计规范
- ac自动机
- PE文件学习之一 文件内容的分部
- centos vsftp配置
- HeapAlloc,GlobalAlloc,LocalAlloc,VirtualAlloc,malloc,new的异同
- 调试linux内核模块
- HTML5中的实用API
- 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素
- TWS : ResetPlan 报错的解决。
- SGU 317 Fast Ride 贪心 + dp
- 八皇后问题 非递归
- 英语12个月份的缩写
- Linux下软件安装卸载
- 调制的方式
- 关于VS2010出现“此方法显式使用的 CAS 策略已被 .NET Framework 弃用... ...请使用 NetFx40_LegacySecurityPolicy 配置开关”解决办法