夏日博客

A-A+

IE浏览器不支持getElementsByClassName解决办法

2016年10月14日 前端设计 暂无评论 阅读 6 views 次

有很多朋友可能都会碰到守getElementsByClassName在ie浏览器下不能识别，或者是说它压根就不认识这个命令了，下面我来介绍如何写一个兼容ie浏览器的getElementsByClassName出来吧,代码如下:

  1. document.getElementsByClassName = function(){  
  2. var tTagName ="*";  
  3. if(arguments.length > 1){  
  4. tTagName = arguments[1];  
  5. }  
  6. if(arguments.length > 2){  
  7. var pObj = arguments[2]  
  8. }  
  9. else{  
  10. var pObj = document;  
  11. }  
  12. var objArr = pObj.getElementsByTagName(tTagName);  
  13. var tRObj = new Array();  
  14. for(var i=0; i<objArr.length; i++){  
  15. if(objArr[i].className == arguments[0]){  
  16. tRObj.push(objArr[i]);  
  17. }  
  18. }  
  19. return tRObj;  
  20. }  

测试涵数,代码如下:

  1. function test(){  
  2. var obj=document.getElementsByClassName(”qq”);  
  3. for (var i=0;i<obj.length;i++){  
  4. obj[i].style.color=”#ff0000″;  
  5. }  
  6. }  
  7.   
  8. function test2(){  
  9. var obj=document.getElementsByClassName(”qq”,”DIV”);  
  10. for (var i=0;i<obj.length;i++){  
  11. obj[i].style.color=”#ff0000″;  
  12. }  
  13. }  
  14.   
  15. function test3(){  
  16. var myid=document.getElementById(’ok’);  
  17. var obj=document.getElementsByClassName(”qq”,”DIV”,myid);  
  18. for (var i=0;i<obj.length;i++){  
  19. obj[i].style.color=”#ff0000″;  
  20. }//xiariboke.net  
  21. }  

例2,代码如下:

  1. if (navigator.appName == 'Microsoft Internet Explorer') {     
  2.         document.getElementsByClassName = function() {     
  3.             var tTagName = "*";     
  4.             if (arguments.length > 1) {     
  5.                 tTagName = arguments[1];     
  6.             }     
  7.             if (arguments.length > 2) {     
  8.                 var pObj = arguments[2]     
  9.             } else {     
  10.                 var pObj = document;     
  11.             }     
  12.             var objArr = pObj.getElementsByTagName(tTagName);     
  13.             var tRObj = new Array();     
  14.             for ( var i = 0; i < objArr.length; i++) {     
  15.                 if (objArr[i].className == arguments[0]) {     
  16.                     tRObj.push(objArr[i]);     
  17.                 }     
  18.             }     
  19.             return tRObj;     
  20.         }     
  21.     }  

完整实例,代码如下:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>float</title>  
  6. <style type="text/css">  
  7. .clear{clear:both;}  
  8. .fl{float:left;}  
  9. .fr{float:right;}  
  10. .div1{width:200px; height:200px;border:1px solid #ccc; background:#F00; filter:alpha(opacity=50); opacity:0.5; }  
  11. .div2{width:200px; height:200px;border:1px solid #ccc; background:#F00; filter:alpha(opacity=40); opacity:0.5; }  
  12. .div3{width:auto; overflow:hidden; border:1px solid #ccc; background:#999; color:#fff;}  
  13. </style>  
  14. </head>  
  15. <body>  
  16. <div class="div1 fl">左浮</div>  
  17. <div class="div2 fr">右浮</div>  
  18. <div class="div3">  
  19.     <h4>中间</h4>  
  20. </div>  
  21. <div class="div3 div5 div6">  
  22.     <h4>中间</h4>  
  23. </div>  
  24. <div class="div3456456 div5 div6 div8">  
  25.     <h4>中间</h4>  
  26. </div>  
  27.   
  28. <script>  
  29. function getClass(class_name,tag_name){  
  30.         var classes;  
  31.         if (document.getElementsByClassName){  
  32.                 classes = document.getElementsByClassName(class_name);  
  33.                 for(var i = 0; i<classes.length; i++)  
  34.                         alert(classes[i].innerHTML);  
  35.                 }  
  36.                 return classes;  
  37.         }else{  
  38.                 if(tag_name == null){tag_name = "*";}  
  39.                         var tags = document.getElementsByTagName(tag_name);  
  40.                         var classes = new Array();  
  41.                         for(var i=0,j=0; i<tags.length; i++){  
  42.                                 var attr_class_name = " " + tags[i].className + " ";        //加上" "只是为了给原class属性值左右加上一个空格符  
  43.                                 if(attr_class_name.indexOf(" " + class_name + " ") != -1){        //这里加上" "是为了让寻找的class是一个单独的class，避免出现找div3，却出现div345的现象。  
  44.                                         classes[j++] = tags[i];  
  45.                         }  
  46.                 }  
  47.                 alert(classes);  
  48.                 return classes;  
  49.         }  
  50. }  
  51. var div3 = getClass("div3");  
  52. </script>  
  53. </body>  
  54. </html>  
标签：

给我留言