浅谈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

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

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

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

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

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

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

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