JS——DOM操作(className属性)

Posted ytraister

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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属性进行不同的样式变化等操作时,用此方法就会浪费时间、代码实现效率低,代码量大

所以,用下面(封装成函数)这种方法,来提高代码效率!!

代码如下图:

 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属性)的主要内容,如果未能解决你的问题,请参考以下文章

JS DOM

js操作DOM

DOM属性 和样式

js-DOM-css的className相关

创建和删除DOM元素

DOM2