网站地图    收藏    合作   

主页 > 前端 > javascript >

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

来源:自学PHP网    时间:2014-09-19 14:47 作者: 阅读:

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

 代码如下 复制代码
document.getElementsByClassName = function(){
var tTagName ="*";
if(arguments.length > 1){
tTagName = arguments[1];
}
if(arguments.length > 2){
var pObj = arguments[2]
}
else{
var pObj = document;
}
var objArr = pObj.getElementsByTagName(tTagName);
var tRObj = new Array();
for(var i=0; i<objArr.length; i++){
if(objArr[i].className == arguments[0]){
tRObj.push(objArr[i]);
}
}
return tRObj;
}

 

测试涵数

 代码如下 复制代码

function test(){
var obj=document.getElementsByClassName(”qq”);
for (var i=0;i<obj.length;i++){
obj[i].style.color=”#ff0000″;
}
}

function test2(){
var obj=document.getElementsByClassName(”qq”,”DIV”);
for (var i=0;i<obj.length;i++){
obj[i].style.color=”#ff0000″;
}
}

function test3(){
var myid=document.getElementById(’ok’);
var obj=document.getElementsByClassName(”qq”,”DIV”,myid);
for (var i=0;i<obj.length;i++){
obj[i].style.color=”#ff0000″;
}
}

例2

 代码如下 复制代码

if (navigator.appName == 'Microsoft Internet Explorer') {   
        document.getElementsByClassName = function() {   
            var tTagName = "*";   
            if (arguments.length > 1) {   
                tTagName = arguments[1];   
            }   
            if (arguments.length > 2) {   
                var pObj = arguments[2]   
            } else {   
                var pObj = document;   
            }   
            var objArr = pObj.getElementsByTagName(tTagName);   
            var tRObj = new Array();   
            for ( var i = 0; i < objArr.length; i++) {   
                if (objArr[i].className == arguments[0]) {   
                    tRObj.push(objArr[i]);   
                }   
            }   
            return tRObj;   
        }   
    }

完整实例

 代码如下 复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>float</title>
<style type="text/css">
.clear{clear:both;}
.fl{float:left;}
.fr{float:right;}
.div1{width:200px; height:200px;border:1px solid #ccc; background:#F00; filter:alpha(opacity=50); opacity:0.5; }
.div2{width:200px; height:200px;border:1px solid #ccc; background:#F00; filter:alpha(opacity=40); opacity:0.5; }
.div3{width:auto; overflow:hidden; border:1px solid #ccc; background:#999; color:#fff;}
</style>
</head>
<body>
<div class="div1 fl">左浮</div>
<div class="div2 fr">右浮</div>
<div class="div3">
    <h4>中间</h4>
</div>
<div class="div3 div5 div6">
    <h4>中间</h4>
</div>
<div class="div3456456 div5 div6 div8">
    <h4>中间</h4>
</div>

<script>
function getClass(class_name,tag_name){
        var classes;
        if (document.getElementsByClassName){
                classes = document.getElementsByClassName(class_name);
                for(var i = 0; i<classes.length; i++)
                        alert(classes[i].innerHTML);
                }
                return classes;
        }else{
                if(tag_name == null){tag_name = "*";}
                        var tags = document.getElementsByTagName(tag_name);
                        var classes = new Array();
                        for(var i=0,j=0; i<tags.length; i++){
                                var attr_class_name = " " + tags[i].className + " ";        //加上" "只是为了给原class属性值左右加上一个空格符
                                if(attr_class_name.indexOf(" " + class_name + " ") != -1){        //这里加上" "是为了让寻找的class是一个单独的class,避免出现找div3,却出现div345的现象。
                                        classes[j++] = tags[i];
                        }
                }
                alert(classes);
                return classes;
        }
}
var div3 = getClass("div3");
</script>
</body>
</html>

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论