原生js给元素添加类

　　这个问题可以使用 setAttribute() 或者 className 属性给元素添加类名，使用方法为 ele.setAttribute("class",newClass) 或者 ele.className = newClass ，但这样相当于重写了元素的className属性，会使元素原本已有的class被覆盖，这个效果其实是替换class而非添加。
　　要做到添加该如何实现呢，思路是先获取当前的 className ,然后设置className为当前取得值+“ ”+newClass（添加的前提是判断要加入的类是否已存在）
代码实现如下：

 1 function hasClass(cla, element) {
 2     if(element.className.trim().length === 0) return false;
 3     var allClass = element.className.trim().split(" ");
 4     return allClass.indexOf(cla) > -1;
 5 }
 6 
 7 function addClass(cla,element){
 8     if(!hasClass(cla,element)){
 9         if(element.setAttribute){
10             element.setAttribute("class",element.getAttribute("class")+" "+cla);
11         }else{
12             element.className = element.className+" "+cla;
13         }
14         
15     }
16 }

　　看一个比较综合的例子，获取页面中所有宽度大于210px的元素，并给他们增加如下样式：

.newStyle{
    background-color: red;
}

　   页面代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <style type="text/css">
 6             #a {
 7                 width: 200px;
 8                 height: 100px;
 9             }
10             #b {
11                 width: 250px;
12                 height: 100px;
13             }
14             #c {
15                 width: 300px;
16                 height: 100px;
17             }
18             .newStyle {
19                 background-color: red;
20             }
21             .bbb {
22                 border: 1px solid black;
23             }
24         </style>
25         <title>title</title>
26     </head>
27     <body>
28         <div id="a">a</div>
29         <div id="b">b</div>
30         <div id="c">c</div>
31     </body>
32 </html>

　　js代码如下:

 1 window.onload = function() {
 2 
 3     var body = document.getElementsByTagName("body")[0];
 4     var dom = body.getElementsByTagName("*");
 5     for(var i = 0; i < dom.length; i++) {
 6         addClass("bbb",dom[i])             //页面元素都加边框
 7         if(dom[i].clientWidth && dom[i].clientWidth >210) {
 8             addClass("newStyle",dom[i])
 9         }
10     }
11 }

　　效果如下：

posted @ 2017-03-23 17:35  long387  阅读(19457)  评论(0)  编辑  收藏  举报