原生js给元素添加类

本文转载自查看原文 2017-03-23 17:35 17594

　　这个问题可以使用 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 }

　　效果如下：

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 原生js给DOM元素添加一个或者多个类名用原生js给DOM元素添加一个类名用原生js给DOM元素添加、删除一个类名原生js选择某元素前面所有的兄弟元素添加类后面所有的兄弟元素删除类原生js为元素添加事件原生js给div添加类原生JS给元素添加class属性元素属性的添加删除（原生js）原生js之同级元素添加移除class 原生JS获取元素，添加事件