详解使用HTML5的classList属性操作CSS类

下面是使用HTML5的classList属性操作CSS类的完整攻略。

什么是classList属性

classList属性是HTML5中新增加的操作CSS类的属性。它可以让我们方便地对元素的class属性进行增、删、改、查等操作。

使用classList属性的常用方法

add 方法：增加CSS类

element.classList.add(className);

这个方法可以在元素中添加一个 CSS 类。如果 CSS 类名已经存在，则此方法不会添加再次添加它。

例子：

<div id="box" class="box">这是一个盒子</div>

<script>
var box = document.getElementById('box');

box.classList.add('red');
console.log(box.className);   // box red
</script>

remove方法：删除CSS类

element.classList.remove(className)

这个方法用于在元素中删除一个 CSS 类。如果 CSS 类没有存在，则此方法不会执行任何操作。

例子：

<div id="box" class="box red">这是一个盒子</div>

<script>
var box = document.getElementById('box');

box.classList.remove('red');
console.log(box.className);   // box
</script>

toggle方法：切换CSS类

element.classList.toggle(className);

这个方法在 CSS 类存在于元素中时，删除它；不存在时，添加它。

例子：

<div id="box" class="box">这是一个盒子</div>

<script>
var box = document.getElementById('box');

box.addEventListener('click', function() {
  box.classList.toggle('red');
});
</script>

当点击这个盒子时，CSS 类 red 将被添加或删除。

contains方法：查找CSS类

element.classList.contains(className);

这个方法用于检查元素是否有指定的 CSS 类。如有，则返回 true，否则返回 false。

例子：

<div id="box" class="box red">这是一个盒子</div>

<script>
var box = document.getElementById('box');

console.log(box.classList.contains('red'));   // true
console.log(box.classList.contains('blue'));  // false
</script>

总结

使用 classList 属性可以让我们方便地对元素的 CSS 类进行增、删、改、查等操作。以上是常用的四个方法：add、remove、toggle 和 contains。