学习classList写的小DemoElement.classList 是一个只读属性，返回一个 DOMTokenLis

Element.classList 是一个只读属性，返回一个 DOMTokenList，其中包含元素所有现有的 class 属性。

使用 classList 要比 element.className 方便不少，后者是一个用空格分隔的字符串。

语法

var elementClasses = elementNodeReference.classList;

elementClasses 是一个 DOMTokenList ，代表 elementNodeReference 的 class 属性。如果没有 class 属性或为空，则 elementClasses.length 返回 0。element.classList 本身是只读的，但可以使用 add() 和 remove() 方法修改它。

常用方法

add( String [, String] )
添加给定的 class 。元素已有的 class 会被忽略。
remove( String [,String] )
移除给定的 class 。
item ( Number )
根据索引位置，返回 class 值。
toggle ( String [, force] )
仅传一个参数时：切换 class 属性。亦即，当该 class 存在时移除并返回 false，否则增加该 class 并返回 true。
传入第二个参数时：若第二个参数为 true 则增加该 class，若为 false 则移除。
contains( String )
检查元素是否拥有给定的 class。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
		var i = 3;
			var onLoadFunct = function() {
				
				var div = document.getElementById("div");
				
				// div 是一个 <div> 元素的对象引用，拥有 class="foo bar"
				div.classList.remove("foo");
				div.classList.add("anotherclass");

				// 如果存在 visible，则移除，否则添加
				div.classList.toggle("visible");

				// 增加或删除 visible，取决于条件 i < 10 的取值结果
				div.classList.toggle("visible", i < 10);

				alert(div.classList.contains("foo"));

				div.classList.add("foo", "bar"); //添加多个 class
			}
		</script>
	</head>

	<body onload="onLoadFunct()">
		<div id='div' class="foo bar"></div>
	</body>

</html>

参考

classList API