原生js获取元素的class属性（获取class的所有元素）以及改变或添加calssName

今天在工作中,用到了设置className,因此查阅了一下资料，总结一下。

一、如何用原生js获取class属性

1 <div class = "dom'>
2 </div>

元素JS实现方法：

 1 function $class(domclass)
 2  {
 3      var odiv = document.getElementsByTagName("*");
 4      var aResult = []; //定义一个空数组，用来存放与目标className相同的元素
 5      for(var i = 0; i<odiv.length; i++)
 6      {//这个是遍历页面中所有元素然后拿他们的class进行对比。如果和我们传进来的domclass这个参数一样就把他放进数组 aResult中。
 7          if(odiv[i].className == domclass)
 8          {
 9              aResult.push(oDiv[i]);   //获取到的元素推进数组中
10          }
11          return aResult;   //返回这个放进了domclass元素的数组
12      }
13  }
14 window.onload = function(){
15    alert($class('boom').length); //获取这些元素的个数
16    alert($class('boom')[0].className); //获取这些元素的第一个元素的className,其实都是一样的className.
17 }

 

用这个函数来获取就很简单了只需要var d = $class("dom");

这个函数的意思是：
var odiv = document.getElementsByTagName("*");
这句意思是获取页面中所有的DOM元素 

二、js改变或添加className

1 <style type="text/css">
2 .newDiv {
3     font-weight: bold;
4 }
5 </style>
 1 <script>
 2 function clk() {
 3     var parent = document.getElementById("parent");
 4    // parent.className = parent.className + " newDiv";  //添加classname
 5 
 6    parent.className = " newDiv";  //改变classname
 7 
 8 }
 9 </script>
10 
11 </head>
12 <body>
13 <input type="button" value="click" onclick="clk();"/>
14 <div id="parent" class="google">
15     <div >child</div>
16 </div>
17 
18 </body>

 

posted @ 2015-01-24 10:02  wanwet  阅读(43002)  评论(0)  编辑  收藏  举报