现在的位置: 网页制作教程网站制作教程 >正文
JS特效教程

document.getElementsByClassName("")和浏览器不兼容的解决办法

发表于2014/8/15 网站制作教程 6条评论 ⁄ 热度 3,065℃

我们在开发网站过程中,经常会碰到代码和不能和各主流浏览器都兼容的情况。往往照顾到了IE,但chrome浏览器又会出问题。这也是令程序员比较头疼的地方。

今天本文主要和大家探讨下如何解决getElementsByClassName兼容浏览器的问题,解决办法当然有很多,但本文谈到的这种也许不是最好的,但确是最实用的。

原生的JS给我们提供了getElementsByClassName方法,可以通过此方法获取到含有某指定class的节点集合,注意是集合,也就是此函数返回一个数组。

但是,IE却并不支持这个方法,但这方法却是很有实用性,所以,我们又不得不专门为IE实现这么一个函数。

怎么实现呢?我们想,这是获取某节点下含有某class的方法,那么,我们就要给这个函数传两个参数:className和context上下文。接着,我们可以判断浏览器是否支持getElementsByClassName方法,支持的话,我们直接调用此方法返回,不支持,则继续下面的思路。

  • 获取所有getElementsByClassName下的所有节点元素;
  • 遍历获取到的所有节点,匹配我们指定的className的类名,匹配成功就赋值。

上面的思路并不是很清晰,但代码会清晰得告诉我们,如下:

function getClass(tagname, className) { //tagname指元素,className指class的值
//判断浏览器是否支持getElementsByClassName,如果支持就直接的用
if (document.getElementsByClassName) {
return getElementsByClassName(className);
}
else {    //当浏览器不支持getElementsByClassName的时候用下面的方法
var tagname = document.getElementsByTagName_r(tagname);  //获取指定元素
var tagnameAll = [];     //这个数组用于存储所有符合条件的元素
for (var i = 0; i < tagname.length; i++) {     //遍历获得的元素
if (tagname[i].className == className) {     //如果获得的元素中的class的值等于指定的类名,就赋值给tagnameAll
tagnameAll[tagnameAll.length] = tagname[i];
}
}
return tagnameAll;
}
}

以上代码注释很清楚,希望可以帮到您。

  • 糗事百科

    好久没来了,过来踩踩

  • 歪妖内涵网

    虽然不懂在说什么,但看起来貌似很厉害的样子

  • 最励志官网

    路过看一下!

  • 网有卖客服

    有电话,你可以在网站里找。

  • 天上的云

    楼主有联系方式吗?