码迷,mamicode.com
首页 > Web开发 > 详细

JS中对获取一个标签的class的方法封一个库

时间:2016-12-04 16:58:33      阅读:257      评论:0      收藏:0      [点我收藏+]

标签:ted   ++   creat   无法   限制   pre   i++   name   ie6   

在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了。

 

JS中对获取一个标签的class的方法封一个库

标签:ted   ++   creat   无法   限制   pre   i++   name   ie6   

原文地址:http://www.cnblogs.com/dirkhe/p/6130743.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!