关闭

解决IE不兼容document.getElementByClassName()的实现方法

时间: 2018-05-26阅读: 2190标签: 兼容

在使用原生js时候,需要通过class样式名来获取dom对象,就直接使用document.getElementByClassName(),发现在IE8以下是不支持document.getElementByClassName()这种方法的。那么我们如何来实现获取classname的兼容写法呢?


方法一:为IE8以下增加document.getElementsByClassName函数,代码如下:

/MSIE\s*(\d+)/i.test(navigator.userAgent);
var isIE=parseInt(RegExp.$1?RegExp.$1:0);
if(isIE>0&&isIE<9){
    document.getElementsByClassName=function(cls){
        var els=this.getElementsByTagName('*');
        var ell=els.length;
        var elements=[];
        for(var n=0;n<ell;n++){
            var oCls=els[n].className||'';
            if(oCls.indexOf(cls)<0)        continue;
            oCls=oCls.split(/\s+/);
            var oCll=oCls.length;
            for(var j=0;j<oCll;j++){
                if(cls==oCls[j]){
                    elements.push(els[n]);
                    break;
                }
            }
        }
        return elements;
    }
}

这样就可以直接使用document.getElementByClassName()方法了。


方法二:自己写一个方法来获取classname.代码如下:

function getByClassName(obj,cls){//obj目标元素,cls要获得的class名
    var element = obj.getElementsByTagName('*');//将目标下的所有子元素获取到
    var result = []; //定义一个数组,存放获得的classname = "cls" 的所有值
    for(var i = 0; i< element.length; i++){
        if(element[i].className == cls){
            result.push(element[i]);
        }
    }
    return result;
}

使用:

<div id= "diva">
    <div class = "divb">我是div</div>
</div>

<script >
var a = document.getElementById("diva");
var result =getByClassName(a,"divb");
</script>

如果要求的div的父元素没有属性id,或者更向上一层的也没有属性id,那么我能想到的办法就是通过document.body获取到body元素再向下逐层查找。(注:请尽量不要用document.body和document.all)


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/825

如何只在IE上加载CSS样式表

IE一直是特殊的一个浏览器,我们可以使用一些方法来指定样式表只在IE浏览器下被加载。IE9以及低于IE9版本 :可以使用条件注释语句来加载特定于ie的样式表。如下所示,使用外部css3样式表。

IE实现css3效果兼容

Shadow阴影Color,设置阴影颜色。Direction,设置阴影的方向,角度也是从0°~315°取值(跟PS的投影效果非常的相似。)Strength,设置投影强度,数值越大越模糊。Gradient渐变

CSS浏览器兼容性与解决方法

所谓的浏览器兼容性问题,是指不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况;而造成浏览器兼容问题的根本原因,是浏览器的内核不同导致的。认识浏览器内核

前端常见的CSS兼容性问题

双倍浮动BUG;表单元素行高不一致;IE6(默认16px为最小)不识别较小高度的标签(一般为10px);图片添加超链接时,在IE浏览器中会有蓝色的边框;最小高度min-height不兼容IE6

web浏览器在线兼容性测试工具_检测html网页在不同浏览器上的兼容问题

对于web前端开发者而言,为了确保html代码在不同浏览器上能正常工作,是一件很麻烦的事情,幸运的是,有很多优秀的工具可以帮助测试浏览器的兼容性,下面就为大家推荐一下比较流行的web浏览器在线兼容性测试工具。

css定义变量_css原生变量的使用和兼容 附带还有更高性能,文件更高压缩率的好处

在开发中,css样式有一些属性往往需要重复使用,为了避免代码冗余,降低维护成本。我们需要使用CSS预编译工具【Sass/Less/Stylus】,随着这些工具的流行,CSS变量也开始规范制定,目前很多浏览器都已经支持了

vue-cli3配置IE浏览器兼容性

在查询如何兼容ie时,首先是查看vue cli官网,浏览器兼容性,感觉官网说的不是太明晰(小白一枚,实在不太懂),然后就直接百度了,网上方法基本类似,都是用 browserslist,babel-polyfill等

如何解决css3浏览器兼容?

css3作为页面样式的表现语言,增加了很多新的属性,但是部分css3属性在一些浏览器上还处于试验阶段,所以为了有效的显示css3的样式,对应不同的浏览器内核需要不同的前缀声明。

X5内核浏览器,video兼容

使用vue-video-player在移动端微信内置浏览器打开,点击视频自动全屏问题。 参考官方 API 是 H5 同层浏览器的原因,可通过设置video属性来处理。

border-radius:50%,在安卓上存在兼容问题

做移动端开发时为了做适配,通常采用rem作为单位,下面来写一个圆角,相同的代码,有的是正圆,有的不是,ios,pc均显示正常

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!