原生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 }
效果如下: