1.随机点名案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>111</div>
<script>
let arr=['赵云','张飞','黄忠','关羽','马超','曹操']
//1.获取元素
const box=document.querySelector('div')
//2.获取随机数 n-0 m---arr.length-1
let random=Math.floor(Math.random()*arr.length)
box.innerHTML=`${arr[random]}`
</script>
</body>
</html>
2.修改元素属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 300px;
height: 300px;
background-color: aqua;
font-size: 50px;
}
</style>
</head>
<body>
<div class="box1">666666</div>
<div class="box2">666</div>
<script>
//1.获取元素
const box1=document.querySelector('.box1')
const box2=document.querySelector('.box2')
//2.通过style修改样式
box1.style.width='500px'
box1.style.fontSize='16px'
box1.style.backgroundColor='pink'
//3.通过添加类名 className会将原来的类名删除掉不建议。
//box2.className='box1'
//classlist
box2.classList.add('box1') //追加
box2.classList.remove('box1')//移除
box2.classList.toggle('box1')//切换：有则删除，没有则添加
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
