// 使用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;
};

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);
};

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

Hi!

<script> <br />// 显示警告信息 <br />function warn(msg){ <br />warn = warn || "一个未知警告!"; <br />if(window.console){ <br />console.warn(msg); <br />} else { <br />alert(msg); <br />} <br />}; <br />// 使用classList属性(Dom元素,css类名) <br />function toggleClassList(element,cName){ <br />// 1. classList API <br />// 切换类,有则移除，没有则添加 <br />if(element.classList.toggle){ <br />element.classList.toggle(cName); <br />return true; <br />} <br />// !!! 其实，本函数 toggleClassList 如果支持的话， <br />// 那么下面的代码就不会被执行，此处仅作演示,请灵活应用 <br />// 2. classList API <br />// element 的class属性是否包含 hide 这个CSS类 <br />var hasHide = element.classList.contains(cName); <br />// <br />if(hasHide){ <br />// 3. classList API <br />// 移除hide类 <br />element.classList.remove(cName); <br />} else { <br />// 4. classList API <br />// 添加hide类 <br />element.classList.add(cName); <br />} <br />return true; <br />}; <br />// 使用className属性(Dom元素,css类名) <br />function toggleClassName(element,cName){ <br />var className = element.className || ""; <br />// 去掉首尾的空白 <br />cName = cName.replace(/^s*|s*$/g,""); <br />// cName 中间如果含有空白字符，则失败. 如果要好好处理，可以拆分为数组，单个处理 <br />var blankReg = /s+/; <br />if(blankReg.test(cName)){ <br />warn("'"+cName+"'中间含有空白字符"); <br />return false; <br />} <br />// 正则，  表示可见连续字符的边界，可以这么理解: <br />// "hide2 hide hide myname" 那么， <br />// hide2 的前后各有一个虚拟的 ,hide 前后也有， <br />// 但是 hi 和 de之间则没有。 <br />// g 表示单行全局 <br />//var rep = /hide/g; <br />var rep = new RegExp("\b" + cName + "\b", "g"); <br />if(rep.test(className)){ <br />className = className.replace(rep,""); <br />} else { <br />className += " "+cName; <br />} <br />// 替换新className。 <br />element.className = className; <br />return true; <br />}; <br />// 函数，切换(元素id，className) <br />function toggleClass(elementId,cName){ <br />// 获取一个DOM元素 <br />var element = document.getElementById(elementId); <br />// 如果不存在元素 <br />if(!element){ <br />warn("id为"+elementId+"的元素不存在"); <br />return false; <br />} <br />if(!element.classList){ <br />warn("id为"+elementId+"的元素不支持classList属性，将使用其他手段来实现"); <br />return toggleClassName(element,cName); <br />} else { <br />return toggleClassList(element,cName); <br />} <br />}; <br />function testDataset(){ <br />// <br />var intro = document.getElementById("intro"); <br />// 注意这个不是 id属性哦，是 data-id 的值 <br />var id = intro.dataset.id; <br />// data-website <br />var website = intro.dataset.website; <br />// data-blog-url,驼峰命名法.. <br />var blogUrl = intro.dataset.blogUrl; <br />// data-my-name <br />var myName = intro.dataset.myName; <br />// <br />var msg = "qq:"+id <br />+",website:"+website <br />+",blogUrl:"+blogUrl <br />+",myName:"+myName <br />; <br />// <br />warn(msg); <br />}; <br />// dom加载后 执行 <br />window.addEventListener("DOMContentLoaded", function() { <br />var open = document.getElementById("open"); <br />var close = document.getElementById("close"); <br />open.addEventListener("click",function(){ <br />// <br />toggleClass("diary2","hide"); <br />toggleClass("loading","hide"); <br />}); <br />close.addEventListener("click",function(){ <br />// <br />toggleClass("diary2","hide"); <br />toggleClass("loading","hide"); <br />}); <br />// <br />testDataset(); <br />}, false); <br /></script>