简单介绍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行代码：对所选的元素，进行样式的变化操作
原文地址：https://www.cnblogs.com/ytraister/p/10940419.html
时间： 2025-01-16 23:23:06