用JS添加的图片在浏览器极速模式中用offset获取高/宽结果为0

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Water Fall</title>
    <script src="js/water.js" type="text/javascript"></script>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    #main{
        position: relative;
    }
    .pin{
        float: left;
    }
    </style>
    </head>
<body>
    <div id="main">
    </div>
</body>
</html>

以上是HTML部分

window.onload=function(){
	var oParent=document.getElementById("main");
	for(var i=0;i<98;i++){
		var oPin=document.createElement('div');
		oPin.className='pin';
		oParent.appendChild(oPin);
		var oBox=document.createElement('div');
		oBox.className='box';
		oPin.appendChild(oBox);
		var oImg=document.createElement('img');
		oImg.src="images/"+i+".jpg";
		oBox.appendChild(oImg);
	}<!--for循环为批量添加本地图片-->
	waterfall(oParent);
}

function waterfall(oParent){
	var _Pin=oParent.getElementsByClassName('pin');
	var _PinW=_Pin[0].offsetWidth;
	console.log(_PinW);
}

问题就出来了，获取任意一个class名为pin的div的宽度或者高度时，获取的值总为0，但用兼容模式获取就正常，请教各位有没有方法能解决这个获取值不对的问题。感谢！

DoubleStone

浏览 1396回答 1

1回答

小沐沐_刚刚好

用jq去实现，这样兼容性好点

0 0

随时随地看视频慕课网APP