在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了。
时间： 2024-10-12 11:33:28