利用js添加class

来来来，开篇点题。

分页应用。当在当前页时，分页的数字有个框之类的。

重要代码如下

    <ul class="pagination">
                        <li><a href="#"><i class="fa fa-angle-left"></i></a></li>
                        <li class="active"><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#"><i class="fa fa-angle-right"></i></a></li>
                    </ul>

好，问题来了：我们是一个一个修改，添加【class="active"】吗？如果10可以，那么100个呢？

这里只说如何添加class,不说怎么分类哈。

1 方法

重要代码： el.setAttribute(\'class\',\'blablaba\');

实例代码

<style type="text/css"> 
.red { 
background: red; 
} 
</style> 


<div id="d1">test div</div> 
<script> 
var div = document.getElementById(\'d1\'); 
div.setAttribute("class", "red"); 
</script> 
问题：IE6/7 : div背景色不是红色 
IE8/9/10/Firefox/Safari/Chrome/Opera : div背景色为红色 
结果：IE6/7不支持setAttribute(\'class\',xxx)方式设置元素的class。

这个方法不好，那向下看

2.来个几乎万能的way

核心代码：el.className = \'blablabla\';

<style type="text/css"> 
.red { 
background: red; 
} 
</style> 


<BODY> 
<div id="d1">test div</div> 
<script> 
var div = document.getElementById(\'d1\'); 
div.className = \'red\'; 
</script>