本文介绍了JavaScript中DOM操作，包括如何使用querySelector选择元素，classList进行类名的添加、删除和切换，以及动态响应按钮点击事件来切换元素的active类。
<style>
.active{
color: aqua;
width: 200px;
height: 200px;
font-size: 30px;
}
</style>
</head>
<body>
<!--
Dom 文档对象模型
节点有12种类型，常见的元素节点，属性节点，文本节点
-->
<!-- <button onclick="off()">关闭</button>
-->
<input type="text" value="on|off">
<!-- dom 类名的操作 -->
<div>div</div>
<script>
var onoff = document.querySelector('input')
var div = document.querySelector('div')
// 添加类名
div.className = 'd1'
// 添加类名列表（可以添加多个）
div.classList.add ('d2')
div.classList.add('d3')
// 获取元素全部类名 , 获取类名的长度
console.log(div.classList,div.classList.length);
console.log(div.classList.item(2)); //通过下标获取指定类名
// 动态切换 类名
onoff.onclick =()=>{
div.classList.toggle('active')
}
// 删除指定类名
div.classList.remove('d3')
// function off(){
// if (confirm('确定要关闭吗？')){
// window.close()
// }
// return
// }
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
