- document.querySelector(" "); 單個元素獲取
- document.querySelectorAll(" "); 多個元素獲取
1 <div class="box box1"></div>
2 <div class="box box2"></div>
3 <div class="box box3" id="box3"></div>
4 <div class="box box4"></div>
5
6 <script>
7 //H5中獲取單個元素 document.querySelector
8 var box1 = document.querySelector(".box1");
9 var box3 = document.querySelector("#box3");
10 box1.style.backgroundColor = "red";
11 box3.style.backgroundColor = "pink";
12
13 //H5中獲取多個元素(獲取的是個數組) document.querySelectorAll
14 var boxArr = document.querySelectorAll(".box");
15 boxArr[3].style.backgroundColor = "green";
16 //for循環進行遍歷操作
17 for(var i = 0;i<boxArr.length;i++){
18 boxArr[i].innerText = i;
19 }
20 </script>
box.classList.add("active");
box.classList.remove("active");
box.classList.contains("active")； >>>>返回值是一個布爾值，true or false
box.classList.toggle("active");
<style>
div{
width: 300px;
height: 100px;
margin: 10px auto;
border: 1px solid #000;
}
.active {
border-radius:50%;
background-color: hotpink;
}
</style>
<body>
<button>box1的active類名切換</button>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<script>
var btn = document.querySelector("button");
var box1 = document.querySelector(".box1");
var box3 = document.querySelector(".box3");
var box4 = document.querySelector(".box4");
//H5中新增的操作類名方法
//添加類名：
box3.classList.add("active");
box4.classList.add("active");
//刪除類名
// box4.classList.remove("active")
//判斷是否有類名
var bol = box4.classList.contains("active");
console.log(bol);
if( bol = false){
box4.classList.add("active");
}
//類名切換
btn.onclick = function () {
box1.classList.toggle("active");
}
</script>
</body>
