首页 > 代码库 > JS中对获取一个标签的class的方法封一个库
JS中对获取一个标签的class的方法封一个库
在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="http://www.mamicode.com/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了。
JS中对获取一个标签的class的方法封一个库
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。