文章目录
一、Class的属性
1、class的常用操作
- 获取对象所有class：
elementNode.className - 给对象添加class：
elementNode.classList.add - 给对象去除class：
elementNode.classList.remove
2、练习代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Class属性</title>
</head>
<body>
<div class="div1 div2">空空</div>
<script>
var ele=document.getElementsByTagName("div")[0];
console.log(ele.className); //所有class名
console.log(ele.classList[0]); //第一个class名
console.log(ele.classList[1]); //第二个class名
ele.classList.add("NewName"); //再添加一个class名
console.log(ele.className);
</script>
</body>
</html>
3、测试结果
以上四条结果分别对应代码块中的四个console.log指令
二、模态对话框
1、效果分析
可能有些人不知道模态对话框是什么，这里用抽屉首页举个图例
可以看到，网页总共总共分为三层，背景层、遮罩层和模态对话框，当点击登录就会弹出这个界面，点击×叉叉就会退出界面，这就是一个模态对话框的工作效果
2、原理分析
其实这个不难实现，刚开始访问时，我们默认给它们添加一个hide的class名字，这样就会将拥有这个hide名字的遮罩标签和对话框标签隐藏起来，：
.hide{
display:none;
}
然后添加一个“登录”按钮，绑定事件onclick和执行函数show()，在这个show里面，我们将遮罩标签和对话框标签那个hide的class名去掉，就没有隐藏效果了，就显示出来了：
function show(){
var ele_shade=document.getElementsByClassName("shade")[0];
var ele_model=document.getElementsByClassName("model")[0];
//去除标签的一个class名，即隐藏效果的class被去除了就不隐藏了，被显示在页面上
ele_shade.classList.remove("hide");
ele_model.classList.remove("hide");
}
同理，添加一个“取消”按钮，绑定事件和cancel()函数，在cancel中，又给遮罩标签和对话框标签添加上那个hide的class名：
function cancel(){
var ele_shade=document.getElementsByClassName("shade")[0];
var ele_model=document.getElementsByClassName("model")[0];
//添加隐藏效果的class名,则被隐藏起来
ele_shade.classList.add("hide");
ele_model.classList.add("hide");
console.log(ele_shade.classList)
console.log(ele_model.classList)
}
3、练习代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模态对话框</title>
<style>
.content{
height: 1500px;
background-color: white;
}
.shade{
position: fixed;
top:8px;
left: 8px;
right: 8px;
bottom: 8px;
background-color: grey;
opacity: 0.5; /*透明度*/
}
.model{
width:200px;
height: 200px;
background-color: yellowgreen;
position:fixed;
top:50%;
left:50%;
margin-top: -100px;
margin-left: -100px;
}
/*刚访问时让组件隐藏起来*/
.hide{
display:none;
}
</style>
</head>
<body>
<div class="content">
<button onclick="show()">登陆</button>
我是背景层！
</div>
<div class="shade hide"></div>
<!--遮罩层：加在content表面的一层，让原来的页面颜色变淡-->
<div class="model hide">
<button onclick="cancel()">取消</button>
model部分
</div>
<script>
function show(){
var ele_shade=document.getElementsByClassName("shade")[0];
var ele_model=document.getElementsByClassName("model")[0];
//去除标签的一个class名，即隐藏效果的class被去除了就不隐藏了，被显示在页面上
ele_shade.classList.remove("hide");
ele_model.classList.remove("hide");
}
function cancel(){
var ele_shade=document.getElementsByClassName("shade")[0];
var ele_model=document.getElementsByClassName("model")[0];
//添加隐藏效果的class名,则被隐藏起来
ele_shade.classList.add("hide");
ele_model.classList.add("hide");
console.log(ele_shade.classList)
console.log(ele_model.classList)
}
</script>
</body>
</html>
4、测试结果：
这样，效果就能实现了，点击登陆就出现模态对话框，点击取消就将遮罩层和对话框隐藏