// 使用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 传递更多有意义的消息。
