浅谈HTML5---classList的api

前言：

 

   组内分享会上自己分享过，一直没有扔到博客里面，classList的api还是很有用的。

 

 

正文：

 

1、摘要：

 

  classList returns a token list of the class attribute of the element.

 

  返回的是元素的一个class 属性的标志的list

 

 

<div id="test" class="red  blue"></div>

 

 

 

• add         ----- 给元素添加一个指定的class

   类似我以前写的addClass --- http://zhangyaochun.iteye.com/blog/1456980

var test = document.getElementById('test');
test.classList.add('yellow');

 

• remove   ----- 从元素中删除一个指定的class

    类似我以前写的removeClass ---  http://zhangyaochun.iteye.com/blog/1457888

var test = document.getElementById('test');
test.classList.remove('red');

 

• toggle     ----如果元素没有指定的class则执行add操作|反之执行remove操作

var test = document.getElementById('test');
test.classList.toggle('yellow')

 

• contains  ----检测元素是否含有指定的class

     类似我以前写的hasClass ---http://zhangyaochun.iteye.com/blog/1458543

var test = document.getElementById('test');
test.classList.contains('red');   //return true | false

 

 

 

2、浏览器支持情况

 

 

• Chrome 8+
• FF 3.6+
• Opera 11.50+
• Safari 5.1+

 

 

    其实比较下来对于支持classList的高级浏览器，还是预判断然后调用原生的api，当然对于不支持的还是沿用原来的那些操作类的api。

 

 

 

//判断的方式
var supportClassList = ("classList" in document.createElement("a"));

 

 

 

 

 

 

 

扩展阅读：

 

1、https://developer.mozilla.org/en/DOM/element.classList