为什么这里去掉window.onload = function(){}图片就显示不了了呢？
慕粉1463572084
2016-07-29 09:08
为什么这里去掉window.onload = function(){}图片就显示不了了呢？
<style type="text/css">
#contain{
height:477px;
position:relative;
margin:0 auto;
overflow: hidden;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
img{
display: block;
position: absolute;
left:0;
border-left: 1px solid #ccc;
}
</style>
</head>
<body>
<div id='contain'>
<img src="img/door1.png" />
<img src="img/door2.png" />
<img src="img/door3.png" />
<img src="img/door4.png" />
</div>
<script type="text/javascript">
window.onload = function(){
var imgs = document.getElementsByTagName('img');
var box = document.getElementById('contain');
var exploseWidth = 160;
var imgWidth = imgs[0].offsetWidth;
var boxWidth = imgWidth + (imgs.length-1) * exploseWidth;
box.style.width = boxWidth + 'px';
for(var i=1;i<imgs.length;i++){
imgs[i].style.left = imgWidth + exploseWidth * (i-1) + 'px';
}
}
</script>
</body>
2回答
-
- 飞天意大利面神兽
- 2016-07-29 14:58:32
没有window.onload ，你获取不到offsetWidth，
然而其他三张图已经赋值了160
自然只能看得到其他三个，也就是 exploseWidth
-
- 郝国旗
- 2016-07-29 09:26:16
没加载完查询不到图片的宽度吧
DOM探索之基础详解篇
98374 学习 · 238 问题
相似问题