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

时间：2023-03-08 20:17:10

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

相关文章