解决 IE 不支持 document.getElementsByClassName()

最新推荐文章于 2025-05-16 15:18:00 发布

原创最新推荐文章于 2025-05-16 15:18:00 发布 · 515 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ie兼容问题

js 专栏收录该内容

8 篇文章

订阅专栏

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <style type="text/css">
         div {
            width: 400px;
            height: 50px;
            margin: 10px 0;
         }
         .c {
            border: 1px solid red;
         }
         .c1 { border: 1px solid green; }
         .c2 { border: 1px solid blue; }
      </style>
      <script type="text/javascript">
         //className是类名.results是返回的数组
         var getClass=function(Class,results){
            results =results || [];
            var tempArr,i;
            //1.首先判断系统所提供的方法是否可以实现该功能
            if(document.getElementsByClassName){
               results.push.apply(results,document.getElementsByClassName(Class));
            }else{
               //2.自定义实现,
               //思路:首先获取所有元素,然后在元素中搜索符合要求的,再加入到数组中
               tempArr = document.getElementsByTagName('*');
               //(1)for循环,判断是否符合要求
               for(var i=0; i < tempArr.length; i++){
                  //注意,className属性需要验证非空
                  var list = tempArr[i].className.split(' ');
                  for (var j=0;j<list.length;j++){
                     if(list[j]===Class){
                        results.push(tempArr[i]);
                        break;
                     }
                  }
               }
            }
            return results;
         };
      </script>
   </head>
   <body>
      <div class="c1 c2"></div>
      <div class="c2"></div>
      <div class="c"></div>
      <div class="c1"></div>
   </body>
   <script>
      //实验
      var list =getClass('c1');
      for(var k in list){
         list[k].style.backgroundColor='pink';
      }
   </script>
</html>