JS——DOM操作（className属性）

简单介绍className：

className 属性：设置或返回元素的 class 属性

看下面一个简单的例子（给className设置样式变化案例），效果如下图：

代码如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>     
 8     <script>
 9         window.onload=function(){
10             var oUl=document.getElementById('ul');
11             var aLi=document.getElementsByTagName('li');    //获取所有的li元素  
12 
13             for(var i=0;i<aLi.length;i++){                  //循环
14                 if(aLi[i].className=='change'){             //做判断
15                     aLi[i].style.background='yellow';       //改变元素样式
16                 }
17             }
18         }
19     </script>
20 </head>
21 <body>
22     <ul id="ul">
23         <li></li>
24         <li class='change'></li>
25         <li></li>
26         <li class='change'></li>
27         <li></li>
28         <li class='change'></li>
29         <li></li>
30     </ul>
31 </html>

代码解释：

首先需要获取全部的li元素（第11行代码），接着做个循环（第13行代码），选中所有的li元素，然后进行className的判断（第14行代码），最后符合条件的元素进行样式的变化（第15行代码）

以上，看起来很简单，但如果需要对很多class属性进行不同的样式变化等操作时，用此方法就会浪费时间、代码实现效率低，代码量大

所以，用下面（封装成函数）这种方法，来提高代码效率！！

扫描二维码关注公众号，回复： 6295936 查看本文章

代码如下图：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>     
 8     <script>
 9         function getClass(oParent,sClass){                  //参数1：oParent———从哪个父级下选取元素  参数2：sClass———需要哪个class属性
10             var aEle=oParent.getElementsByTagName('*');     //获取父级下所有的元素
11             var aResult=[];                                 //创建一个数组变量，存放所有被选出来的元素
12 
13             for(var i=0;i<aEle.length;i++){
14                 if(aEle[i].className==sClass){              //判断class属性相同的元素
15                     aResult.push(aEle[i]);                  //把符合条件的元素，存进aResult中
16                 }
17             }
18             return aResult;                                 //即：选取出一组符合条件的元素
19         }
20 
21         window.onload=function(){
22             var oUl=document.getElementById('ul');
23             var aChange=getClass(oUl,'change');             //调用getClass函数，选取参数1：父级ul元素和参数2：名为‘change’的class属性
24 
25             for(var i=0;i<aChange.length;i++){              //对所选的元素，进行样式的变化
26                 aChange[i].style.background='red'
27             }
28         }
29     </script>
30 </head>
31 <body>
32     <ul id="ul">
33         <li></li>
34         <li class='change'></li>
35         <li></li>
36         <li class='change'></li>
37         <li></li>
38         <li class='change'></li>
39         <li></li>
40     </ul>
41 </html>

解释代码：

第9行代码：命名一个叫getClass的封装函数，传入两个参数（参数1：oParent———从哪个父级下选取元素参数2：sClass———需要哪个class属性）；

第10行代码：在封装函数中，获取参数一父级元素下的所有元素；

第13行代码：循环父级元素下的所有元素；

第14行代码：判断class属性与传入的第二个参数相同的元素；

第11行代码：创建一个数组变量，存放所有被选出来的元素；

第15行代码：因为循环做出的判断结果不一定只有一个class属性，所以需要把符合条件的元素，存进aResult数组中；

第18行代码：循环结束，返回符合条件的一组元素（aResult数组）；

第23行代码：调用getClass函数，选取参数1：父级ul元素和参数2：名为‘change’的class属性

第25-26行代码：对所选的元素，进行样式的变化操作

JS——DOM操作（className属性）

猜你喜欢