javascript - IE7下面代码不兼容问题
本文介绍了javascript - IE7下面代码不兼容问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
width: 100%;
}
ul{
float: left;
width: 15%;
margin-right: 20px;
border: 1px solid #CCCCCC;
}
li{
list-style: none;
margin-bottom: 10px;
width: 100%;
}
</style>
</head>
<script type="text/javascript">
window.onload = function(){
var oUl = document.getElementsByTagName("ul");
window.onscroll = function(){
var seeHeight = document.documentElement.clientHeight;
var scrollHei = document.documentElement.scrollTop || document.body.scrollTop
var maxHeight = oUl[0]
for(var k = 0 ; k < oUl.length ; k++){
if(maxHeight.offsetHeight < oUl[k].offsetHeight){
maxHeight = oUl[k]
}
}
if(seeHeight + scrollHei - maxHeight.offsetHeight > -5){
createLi(10)
}
};
function createLi(num){
for(var j = 0 ; j < num ; j++){
var li = document.createElement("li");
li.style.background = "rgb("+randomColor()+")";
li.style.height = randomHeight() + "px";
var lostHeight = oUl[0]
for(var k = 0 ; k < oUl.length ; k++){
if(lostHeight.offsetHeight > oUl[k].offsetHeight){
lostHeight = oUl[k]
}
lostHeight.appendChild(li)
}
console.log(lostHeight)
};
};
createLi(25)
function randomColor(){
var r = parseInt(Math.random()*256);
var g = parseInt(Math.random()*256);
var b = parseInt(Math.random()*256);
return r+","+g+","+b;
};
function randomHeight(){
var eleHeight = parseInt(Math.random()*80) + 100;
return eleHeight;
};
}
</script>
<body>
<div>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
</div>
</body>
代码在IE7循环查找最短的ul然后一次性全部添加到最短的这个里面了，而不是其他高版本浏览器一样一直循环遍历添加在最短的里面
解决方案
IE7下，for循环中appendChild不会更新offsetHeight 导致一次循环中所有的li被append到同一个ul下。
改写createLi函数
function createLi(num){
for(var j = 0 ; j < num ; j++){
setTimeout(function(){
var li = document.createElement("li");
li.style.background = "rgb("+randomColor()+")";
li.style.height = randomHeight() + "px";
var lostHeight = oUl[0]
for(var k = 0 ; k < oUl.length ; k++){
if(lostHeight.offsetHeight > oUl[k].offsetHeight){
lostHeight = oUl[k]
}
}
lostHeight.appendChild(li)
},0)
};
};这篇关于javascript - IE7下面代码不兼容问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
