封装class，让className可以在IE8及其以下版本的浏览器中使用

思路：在IE8及其以下版本的浏览器中className会变为一个字符串，用split将其变为数组，用逗号隔开

你所需要的class名，再建一个新数组，判断原来那个数组里面的元素有没有你需要的类名，如果有，就添加到

新数组里，最后返回新数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<ul id="a">
    <li class="a  abc  abcd  abcde ">1</li>
    <li class="c a">2</li>
    <li class="aa">3</li>
    <li class="a  c   b  r  f">4</li>
    <li class="b">5</li>
</ul>
<div id="b">

    <b   class="div1">12312</b>
   <div class="divvv">aisdjfoa </div>
    <h1 class="div  div1"> 23456</h1>
    <p class="div2  "> pppp</p>
</div>
<script>
// 第一种：
    for (var i = 0; i <fn("a","a").length; i++) {
        fn("a","a")[i].style.background = "red";
    }
//需要调用时，直接修改调用函数fn里的参数，第一个参数为父元素的id，第二个参数为要调用的class类名
    for (var i = 0; i <fn("b","div1").length; i++) {
        fn("b","div1")[i].style.color = "blue";
    }

    function fn(ul,a) {

        var oUL = document.getElementById(ul);
        var arrLi = oUL.getElementsByTagName("*");// 获取到ul标签下所有子标签
        //console.log(typeof  arrLi[0].getAttribute("class"))检查第一个class的类型;//String;所以class为字符串；
        var arLII = [];//存放含有我需要类名的标签
        for (var i = 0; i < arrLi.length; i++) {
            var arrString = arrLi[i].className.split(" ")
            // 将class类名中的空格换成“，”，将arrLi[i]变为数组并以逗号隔开,即第一个class为arrString=[a,ab,abcd,abcde]
            for (j in arrString) {
                if (arrString[j] == a) {
                    arLII.push(arrLi[i])
                }
                // 然后进行for in循环，判断这个数组里是否有为“a”的元素，如果有就添加到新数组里
            }
        }
        return arLII;//返回新数组

    }




</script>


</body>
<!--<ul>-->
    <!--<li class="RRR">1</li>-->
    <!--<li class="c a">2</li>-->
    <!--<li class="RRR">3</li>-->
    <!--<li class="a  c   b  r  f">4</li>-->
    <!--<li class="b">5</li>-->
<!--</ul>-->
<script>
// 第二种：

    //    function rua(classR,ruaC) {
    //        ruaC=ruaC||document;
    //        if(ruaC.getElementsByClassName){
    //            return ruaC.getElementsByClassName(classR);
    //        }else{
    //            var RR=ruaC.getElementsByTagName("*");
    //            var ru=[];
    //            for (var i=0;i<RR.length;i++){
    //                var aa=RR[i].className.split(" ");
    //                for(var p=0;p<aa.length;p++){
    //                    if(aa==classR){
    //                        ru.push(RR[i]);
    //                    }
    //                }
    //
    //            }
    //            return ru;
    //        }
    //    }
    //    var Rul=document.getElementsByTagName("ul")[0];
    //    rua("RRR",Rul)[0].style.color="red";

</script>
</html>

封装class，让className可以在IE8及其以下版本的浏览器中使用

猜你喜欢