HTML5中与类相关的扩充classList

最新推荐文章于 2023-01-01 20:20:26 发布

Wang's Blog

最新推荐文章于 2023-01-01 20:20:26 发布

阅读量900

点赞数

分类专栏： Html5 文章标签： html5 classList

本文链接：https://blog.csdn.net/tyro_java/article/details/51226212

版权

Html5 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

话说 classList

与其他DOM属性类似，DOMTokenList有一个表示自己包含多少元素的length属性，而要取得每个元素，可以使用item()方法。

此外这个新类型还定义了其他方法：

add：为元素添加一个新的类名
contains：判断元素是否包含一个类名，如果包含，返回true
remove：为元素移除一个类名
toggle：如果元素有这个类名，就移除这个类名，没有这个类名，就添加这个类名。

下面来举例说明：

html 结构：

<div class='div div1 div2'>div</div>

javascript结构：

  var div = document.querySelector('div');
  
  // item() 
  console.log(div.classList.item(0)); // div
  console.log(div.classList.item(1)); // div1
  
  // add() 
  div.classList.add('div3');
  console.log(div.classList.item(3)); // div3
  
  // remove() 
  div.classList.remove('div3');
  console.log(div.classList.item(3)); // null

  // contains() 
  console.log(div.classList.contains('div')); // true
  
  // toggle() 
  div.classList.toggle('div');
  console.log(div.classList.contains('div')); // false
  div.classList.toggle('div');
  console.log(div.classList.contains('div')); // true