在JS中我們經常會會用到，獲取一個標簽的id
var aId=document.getElementById("id")
現在雖然有getElementsByClassName這個方法，但是這個方法再ie6下兼容性存在問題，所以保險起見還是封一個獲取class的庫
首先先看庫
/** * Created by asus on 2016/12/4 By dirk_jian. */ function getByclass(oParent,sClass){ var aEle=oParent.getElementsByTagName('*'); var aResult=[]; var re=new RegExp('\\b'+sClass+'\\b','i'); for(var i=0;i<aEle.length;i++){ // if(aEle[i].className==sClass) //如果有多個class那就無法檢測了 // if(aEle[i].className.search(sClass)!=-1) //!=-1證明其有sCalss，但是只是有class這幾個字母就行，無法全面達到目的 if(re.test(aEle[i].className)) //這個就是不限制范圍的檢測 { aResult.push(aEle[i]); } } return aResult; }
再看如何調用並對獲取到的class的標簽進行css樣式的修改
<script src="getByclass.js"></script>
<script>
window.onload=function(){
oUl=document.getElementById("div1");
var aDiv1=getByclass(oUl,'div2');
var aDiv2=getByclass(oUl,'div3');
for(var i=0;i<aDiv1.length;i++){
aDiv1[i].style.border='1px solid black';
aDiv1[i].style.width='100px';
aDiv1[i].style.height='100px';
}
for(var i=0;i<aDiv2.length;i++){
aDiv2[i].style.width='100px';
aDiv2[i].style.height='100px';
aDiv2[i].style.border='1px solid pink';
}
}
</script>
以下為HTML
<body> <div id="div1"> <div class="div2"></div> <div class="div3"></div> </div> </body>
這樣就輕松的可以獲取一個標簽的class了。