样式操作之className和classList的差异
通过clsaaName操作css
如果需要通过js来修改样式，且修改的样式比较多，可以通过clssName来操作css
语法：
元素.className = '类名'
注意：
- 由于class是关键字，所以使用className来替代
- className是使用新值换旧值，会替换掉之前的类名，如果需要多添加一个类，则需要保留之前的类名
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>改个字</title>
<style>
.divborder {
border: 1px solid #ccc;
}
.mydiv {
width: 400px;
height: 400px;
background-image: url(./images/1.jpg);
background-size: contain;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<button>改背景</button>
<div class="divborder">我是内容</div>
<script>
let div = document.querySelector('.divborder')
let btn = document.querySelector('button')
btn.addEventListener('click', function() {
// clssName 会新值换旧值，如需要添加一个类，需要保留之前的类名
div.className = 'divborder mydiv'
})
</script>
</body>
</html>
通过classList操作css
为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
语法：
//追加一个类
Element.classList.add('类名')
//删除一个类
Element.classList.remove('类名')
//切换一个类
Element.classList.toggle('类名')
//判断当前元素是否包含一个指定名称的类名，返回一个布尔值
Element.classList.contains('类名')
注意：
- classList.add()在追加一个类名时，“不影响”其他样式，若新添加的类有相同的样式时，会导致样式覆盖
- classList.remove()在去除一个类名时，不影响其他样式
- classList.toggle() 如果有该类名就移除，如果没有该类名就添加
- classList.contains()会返回一个布尔值
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.red {
color: red;
}
.size50 {
font-size: 50px;
}
.underline {
text-decoration: underline;
}
</style>
</head>
<body>
<button>添加一个字体大小样式</button>
<button class="second">移除一个字体大小样式</button>
<button>切换一个字体大小样式</button>
<button>判断元素是否有某个样式</button>
<p class="red">我是百变p元素</p>
<script>
let btn1 = document.querySelector('button')
let btn2 = document.querySelector('.second')
let btn3 = document.querySelector('button:nth-of-type(3)')
let btn4 = document.querySelectorAll('button')[3]
let p = document.querySelector('p')
btn1.addEventListener('click', function() {
// classList.add()追加指定名称的类名 “不影响”元素之前的样式
p.classList.add('size50', 'underline')
})
btn2.addEventListener('click', function() {
// classList.remove()移除指定名称的类名 不影响其他样式类名
p.classList.remove('size50')
})
btn3.addEventListener('click', function() {
// classList.toggle()切换一个类名，如果有就移除，如果没有就添加
p.classList.toggle('size50')
})
btn4.addEventListener('click', function() {
// classList.contains 判断当前元素是否包含一个指定名称的类名，返回一个布尔值，如果是返回真，如果否返回假
let flag = p.classList.contains('size50')
console.log(flag);
})
</script>
</body>
</html>
