簡單介紹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行代碼：對所選的元素，進行樣式的變化操作