一、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、測試結果：
這樣，效果就能實現了，點擊登陸就出現模態對話框，點擊取消就將遮罩層和對話框隱藏