webapi中通过className更改元素样式
- 在style标签中重新定义一个新的样式
- 在js中直接引用：获取的元素.className=’’;
<style>
.box{
width: 100px;
height: 100px;
background-color: pink;
}
.size{
font-size: 30px;
}
</style>
<body>
<div class="box">123</div>
</body>
<script>
const box= document.querySelector('.box') //获取dom元素
box.onclick=function(){
this.className='size'
}
</script>
特点
- 如果样式修改较多，可以采取操作类名方式更改元素样式。
- class因为是个保留字，因此使用className来操作元素类名属性
- className 会直接更改元素的类名，会覆盖原先的类名。
缺点:
在操作类名时，需要通过className属性添加，删除和替换类名。因为className中是一个字符串，所以即使只修改字符串一部分，也必须每次都设置整个字符串的值。
webapi中通过ClassList更改元素样式
这个方法可以专门用于删除或者添加，替换class属性。
<script>
let btn1 = document.querySelector('button')
let btn2 = document.querySelector('.btn2')
let btn3 = document.querySelector('.btn3')
let btn4 = document.querySelector('.btn4')
let p = document.querySelector('p')
btn1.onclick = function () {
p.classList.add('size50', 'underline')
}
btn2.onclick = function () {
p.classList.remove('underline')
}
btn3.onclick = function () {
p.classList.toggle('underline')
}
btn4.onclick = function () {
let x = p.classList.contains('underline')
console.log(x);
}
</script>
ClassList包含以下属性和方法:
element.classList.add()增加类element.classList.remove()删除类element.classList.toggle()切换类 (有就删除,没就添加)element.classList.contains()判断是否包含某个类，返回true/false
特点:
- classList不会覆盖类名，在原有的类名上添加上另一个类名
\
