原生js动态添加class

在某些场景我们需要使用到动态切换class来实现网站效果。

移除class示例：
```javacripit
	// 根据id获取组件对象
	var button = document.getElementById("button");
	// 移除class="active"的样式
	button.classList.remove("active");
```

添加class示例：
```javacripit
	// 根据id获取组件对象
	var button = document.getElementById("button");
	// 添加class="active"的样式
	button.classList.add("active");
```

案例：
CSS:
```css
		.buy_type {
            padding: 6px 22px 6px 22px;
            border: 1px solid #e5e5e5;
            border-radius: 2px;
            font-size: 20px;
            margin: 0 22px;
            width: 100px;
            box-shadow: 0 3px 9px #cfcfcf;
            cursor: pointer;
        }

.active {
            border: 1px solid #FFD150;
            box-shadow: 0 3px 9px #FFD150;
        }
```
HTML
```html
    <div id="choiceMonth" style="text-align: center;margin: 0 10px 30px 10px">
        <span onclick="choiceMonth(1)" class="buy_type active">1 月（月卡）</span>
        <span onclick="choiceMonth(2)" class="buy_type">12 月（年卡）</span>
        <span onclick="choiceMonth(3)" class="buy_type">永久VIP</span>
    </div>
```
Javacript

```javacript
	window.onload = function() {
        var spanList = document.getElementById("choiceMonth").getElementsByTagName("span");

for(var i = 0, len = spanList.length; i < len; i++) {
            spanList[i].index = i;
            spanList[i].onclick = function() {
                for(var j = 0; j < len; j++) {
                   spanList[j].classList.remove("active");
                }
                this.classList.add("active");
            }
        }
    }
```