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

思路:在IE8及其以下版本的浏览器中className会变为一个字符串,用split将其变为数组,用逗号隔开
你所需要的class名,再建一个新数组,判断原来那个数组里面的元素有没有你需要的类名,如果有,就添加到

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

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

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

    <b   class="div1">12312b>
   <div class="divvv">aisdjfoa div>
    <h1 class="div  div1"> 23456h1>
    <p class="div2  "> ppppp>
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]变为数组并以逗号隔开,即第一个classarrString=[a,ab,abcd,abcde]
            for (j in arrString) {
                if (arrString[j] == a) {
                    arLII.push(arrLi[i])
                }
                // 然后进行for in循环,判断这个数组里是否有为“a”的元素,如果有就添加到新数组里
            }
        }
        return arLII;//返回新数组

    }




script>


body>

    
    
    
    
    

<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    //                var aa=RR[i].className.split(" ");
    //                for(var p=0;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及其以下版本的浏览器中使用)