//语法
//active 是一个css类名
元素.className = 'active'
//注意：1.由于class是关键字，所以使用className去代替
2.className是使用新值换旧值，如果需要添加一个类，需要保留之前的类名
通过classList操作类控制css
为了解决className容易覆盖一起的类名，我们可以通过classList方式追加和删除类名
<head>
<style>
.red {
color: red;
}
.size50 {
font-size: 50px;
}
.underline {
text-decoration: underline;
}
</style>
</head>
<body>
<button>添加一个字体大小样式</button>
<button>移除一个字体大小样式</button>
<button>切换一个字体大小样式</button>
<button>判断元素是否有某个样式</button>
<p class="red">我是百变p元素</p>
<script>
// 追加一个类
// 元素.classList.add('类名')
let btn1 = document.querySelector('button')
// 获取元素
let p = document.querySelector('p')
btn1.addEventListener('click', function () {
//改变了字体大小
p.classList.add('size50')
})
// 删除一个类
// 元素.classList.remove('类名')
let btn2 = document.querySelectorAll('button:nth-child(2)')
// let p = document.querySelector('p')
btn2.addEventListener('click', function () {
//删除了上面添加的字体大小的样式类名
p.classList.remove('size50')
})
// 切换元素模式，没有就添加，有就删除
// 元素.classList.taggle('类名')
</script>
</body>
修改/设置表单元素属性
//表单.value = '用户名'
//表单.type = 'password'
//比如:disabled,checked,selected
<body>
<input type="text" class="passw_text" />
<button class="change">变</button>
<br />
<input type="checkbox" class="chkAll" />全选
<div>
<input type="checkbox" />写代码 <input type="checkbox" />调bug
<input type="checkbox" />写文档
</div>
<button class="getChioce">获取用户选择</button>
<script>
//点击全选时，下面的复选框全部选中案例
//获取元素
let passw_text = document.querySelector('.passw_text')
let change = document.querySelector('.change')
//单击事件
change.addEventListener('click', function () {
// 根据当前type值进行type属性的设置
passw_text.type = passw_text.type ==='password' ? 'text' : 'password'
})
/* 1. 获取全选复选框的选中状态：元素.checked属性
2. 获取下面三个复选框:querySelectorAll>>伪数组
3. 遍历三个复选框，为每个复选框设置checked属性值
为全选复选框添加单击事件
获取当前全选复选框的状态值，选中为true,否则为false
遍历下面的所以复选框，为每个设置checked状态值
for(let i = 0;i< .length;i++) {
} */
let chkAll = document.querySelector('.chkAll')
let checked = document.querySelectorAll('div input')
// console.log(checked);
chkAll.addEventListener('click', function () {
let dian = chkAll.checked
console.log(dian);
for (let i = 0; i < checked.length; i++) {
checked[i].checked = dian
}
})
</script>
</body>
就这样吧
