.classList顾名思义,用于操作类名的。
1. .classList.add( ):给元素添加类名，若已存在，则不进行添加操作
2. .classList.remove( ):元素移除已存在的类名。
3. .classList.toggle( ):若元素存在该类名则移除，不存在则添加
4. .classList.contains( ）：若元素存在该类名返回true，不存在返回false。
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.tar{
padding: 10px;
background-color: #FAEBD7;
}
.text1{
color: aquamarine;
}
.tar .adco{
background-color: #00BFFF;
}
.tar .aiyo{
background-color: green;
}
</style>
</head>
<body>
<button type="button" onclick="addColor()">添加颜色</button>
<button type="button" onclick="removeColor()">去除颜色</button>
<button type="button" onclick="toggleColor()">切换颜色</button>
<button type="button" onclick="saveColor()">是否有颜色</button><span>？</span>
<button type="button" onclick="replaceColor()">替换颜色</button>
<div class="tar">
<p class="text1">你眼里的风景</p>
</div>
<script type="text/javascript">
let text1 = document.getElementsByClassName('text1')[0];
function addColor(){
text1.classList.add('adco')
}
function removeColor(){
text1.classList.remove('adco')
}
function toggleColor(){
text1.classList.toggle('adco')
}
function saveColor(){
let save = text1.classList.contains('adco');
let span = document.getElementsByTagName('span')[0];
if(save){
span.innerHTML = '有背景颜色';
}else{
span.innerHTML = '没有背景颜色';
}
}
function replaceColor(){
text1.classList.replace('text1','aiyo')
}
</script>
</body>
</html>