问答详情
源自:1-3 实例JS+DOM

为什么这里去掉window.onload = function(){}图片就显示不了了呢?

为什么这里去掉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>


提问者:慕粉1463572084 2016-07-29 09:08

个回答

  • 飞天意大利面神兽
    2016-07-29 14:58:32
    已采纳

    没有window.onload ,你获取不到offsetWidth,

    然而其他三张图已经赋值了160

    自然只能看得到其他三个,也就是 exploseWidth 

  • 郝国旗
    2016-07-29 09:26:16

    没加载完查询不到图片的宽度吧