class对象
className
修改样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: aqua;
}
.action {
width: 300px;
height: 300px;
background-color: pnik;
margin-left: 100px;
}
</style>
</head>
<body>
<div></div>
<script>
let box = document.querySelector('div')
box.className = 'action'
</script>
</body>
</html>
classList
修改样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: aqua;
}
.action {
width: 300px;
height: 300px;
background-color: pnik;
margin-left: 100px;
}
</style>
</head>
<body>
<div class="one"></div>
<script>
let box = document.querySelector('div')
// add 追加
box.classList.add('action')
// remove 移除
box.classList.remove('one')
// 切换类
box.classList.toggle('one')
</script>
</body>
</html>
修改表单属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" name="" id="" value="请输入">
<button disabled>按钮</button>
<input type="checkbox" name="" id="" class="agree">
<script>
let input = document.querySelector('input')
input.value = '小米'
input.type = 'password'
let btn =document.querySelector('button')
btn.disabled = true
let checkbox = document.querySelector('.agree')
checkbox.checked = true
</script>
</body>
</html>
间歇函数(定时器)
setInterval(function(){
console.log('color');
},1000)
function show (){
console.log('Zero')
}
// 开启定时器
let timer = setInterval(show,1000)
// 清除定时器
clearInterval(timer)