今天在工作中,用到了設置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>