class List
- class List 是H5 新增的一个属性 返回元素的类名 但 ie 10以上版本才支持
- 该属性在元素中 添加、移除、 及切换css类
添加类
- element.class List(’类名‘)
dy>
<div class="one tow"></div>
<script>
var div = document.querySelector('div')
// console.log(div.classList[1]);
// 添加类名 是在后面添加 不会覆盖以前的类名
div.classList.add('three')
删除类
element.class.remove(‘类名’)
<body>
<div class="one tow"></div>
<script>
var div = document.querySelector('div')
// console.log(div.classList[1]);
// 添加类名 是在后面添加 不会覆盖以前的类名
div.classList.add('three')
// 删除类名
div.classList.remove('one')
</script>
切换类
element.classList.toggle (‘类名’)
<style>
.bg{
background-color: #000;
}
</style>
</head>
<body>
<div class="one tow"></div>
<button> 开关</button>
<script>
var div = document.querySelector('div')
// console.log(div.classList[1]);
// 添加类名 是在后面添加 不会覆盖以前的类名
div.classList.add('three')
// 删除类名
div.classList.remove('one')
// 切换类 classList.toggle
var btn = document.querySelector('button');
btn.addEventListener('click',function(){
document.body.classList.toggle('bg')
})
</script>