// data-blog-url,驼峰命名法..
5个你不知道的HTML5 API接口演示 title><元名称=“描述” content =“ original = http://davidwalsh.name/html5-apis”>
.hide {display:none}
.poplayer {z-index: 999; 位置:绝对;背景颜色:#fff; top:0px; left:0px;溢出:隐藏;宽度:100%;高度:100%;不透明度:1;}
.close {顶部:3px; right:10px; position:absolute;}
style>
//显示
警告信息功能warn(msg){
warn = warn || “一个未知警告!”;
如果(窗口
控制台){ console.warn(msg);
}其他{
alert(msg);
}
};
// //使用classList属性(Dom元素,css类名)
function toggleClassList(element,cName){
// 1. classList API
//切换类,有则可删除,没有则添加
if(element.classList.toggle){
元素.classList.toggle(cName);
返回true;
}
// !!! 其实,本函数toggleClassList如果支持的话,
//那么下面的代码就不会被执行,此处唯一作演示,请灵活应用
// 2. classList API
//元素的类属性是否包含隐藏这个CSS类
var hasHide = element.classList.contains(cName);
// //
if(hasHide){
// 3. classList API
//可移除隐藏类
element.classList.remove(cName);
} else {
// 4. classList API
//添加隐藏类
element.classList.add(cName);
}
返回true;
};
//使用className属性(Dom元素,css类名)
function toggleClassName(element,cName){
var className = element.className || “”;
//
去掉首尾的空白cName = cName.replace(/ ^ / s * | / s * $ / g,“”);
// cName中间如果包含空白字符,则失败。如果要好好处理,可以分割为层叠,分开处理
var blankReg = // s + /;
if(blankReg.test(cName)){
warn(“'” + cName +“'中间包含空白字符”);
返回false;
}
//正则,/ b表示可见连续字符的边界,可以很理解:
//“ hide2 hide hide myname”那么,
// hide2的前后各有一个虚拟的/ b,hide前后也有,
//但是hi和。德之间则没有
//克表示单行全局
//变种代表= //拜德/ b / g的;
var rep = new RegExp(“ // b” + cName +“ // b”,“ g”);
如果(代表
} else {
className + =“” + cName;
}
//替换新的className。element.className
= className;
返回true;
};
//函数,切换(元素id,className)
函数toggleClass(elementId,cName){
//获取一个DOM元素
var element = document.getElementById(elementId);
//如果不存在元素
if(!element){
warn(“ id为” + elementId +“的元素不存在”);
返回false;
}
if(!element.classList){
warn(“ id为” + elementId +“的元素不支持classList属性,将使用其他手段来实现”);
返回toggleClassName(element,cName);
} else {
return toggleClassList(element,cName);
}
};
函数testDataset(){
//
var intro = document.getElementById(“ intro”);
//注意这个不是id属性哦,是data-id的值
var id = intro.dataset.id;
//数据网站
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
+“,网站:” +网站
+“,blogUrl:” + blogUrl
+“,myName:” + myName
;
//
warn(msg);
};
// dom加载后执行
window.addEventListener(“ DOMContentLoaded”,function(){
var open = document.getElementById(“ open”);
var close = document.getElementById(“ close”);
open.addEventListener(“ click”,function(){
//
toggleClass(“ diary2”,“ hide”);
toggleClass(“ loading”,“ hide”);
});
close.addEventListener(“ click”,function(){
//
toggleClass(“ diary2”,“ hide”);
toggleClass(“ loading”,“ hide”);
});
//
testDataset();
}, 错误的);
script>
head>