原生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獲取元素，添加事件