classList类名操作
Posted 乱舞春秋__
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了classList类名操作相关的知识，希望对你有一定的参考价值。
classList 属性可以返回元素的类名（只读）。
语法格式：
element.classList示例：
<div class="one two three"></div>
<script>
var div = document.querySelector('div');
console.log(div.classList);
</script>
控制台输出了一个 DOMTokenList 对象，该对象包含了元素的全部属性，我们可以通过索引来读取元素的类名。
例如：
<div class="one two three"></div>
<script>
var div = document.querySelector('div');
console.log(div.classList[1]);
</script>控制台输出：
此外，我们可以通过length属性读取元素类的个数。
示例：
<div class="one two three"></div>
<script>
var div = document.querySelector('div');
console.log(div.classList.length);
</script>控制台输出：
classList属性的方法：
1. 使用add( )方法添加类
语法格式：
element.classList.add('class1','class2',...'classn');
示例：
<div></div>
<script>
var div = document.querySelector('div');
div.classList.add('one','two');
console.log(div.classList);
</script>控制台输出：
通过add( )方法，为div添加了两个类（one和two） 。
2.使用remove( )方法移除类
语法格式：
element.classList.remove('类名');
示例：
<div class="one two"></div>
<script>
var div = document.querySelector('div');
div.classList.remove('one');
console.log(div.classList);
</script>控制台输出：
通过remove( )方法，为div移除了一个类 （one）。
3.使用contains( )方法检测类
语法格式：
element.classList.contains('类名');
返回布尔值，若元素包含指定的类，则返回true，否则返回false。
示例：
<div class="one two"></div>
<script>
var div = document.querySelector('div');
console.log(div.classList.contains('one'));
</script>控制台输出：
div包含类one，故返回true。
4.使用item( )方法返回索引值对应的类名
语法格式：
element.classList.item(索引值);
如果索引值在区间范围外则返回 null
示例：
<div class="one two"></div>
<script>
var div = document.querySelector('div');
console.log(div.classList.item(0));
</script>控制台输出：
返回了div的第一个类名。
5.toggle( )方法切换类名
语法格式：
element.classList.toggle('类名');
如果该类名存在，则在该元素移除类名。如果该类名不存在，则在元素中添加类名。
示例：
（1）移除类
<div class="three"></div>
<script>
var div = document.querySelector('div');
div.classList.toggle('three');
console.log(div.classList);
</script>控制台输出：
（2）添加类
<div></div>
<script>
var div = document.querySelector('div');
div.classList.toggle('three');
console.log(div.classList);
</script>控制台输出：
以上是关于classList类名操作的主要内容，如果未能解决你的问题，请参考以下文章