- 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>