您的位置：首页 > 其它

解决 IE 不支持 document.getElementsByClassName()

2016-08-17 17:57 633 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ie兼容问题

相关文章推荐

新的分享

章节导航