视频解说:
其中document.body.appendChild(div)语句执行时,元素已加入到body末尾,但此时依旧是Js线程在控制浏览器,所以屏幕上看不到元素,但实际可以获取元素宽高。此原理可加一行2秒的死循环加以验证。
对后端返回图片地址但没返回图片宽高的情况,可以用该原理排版瀑布流
<style>
*{margin:0;padding:0;}
.haha{width:120px;margin:10px;}
</style>
var div = document.createElement('div')
var img = document.createElement('img')
img.onload = function (e) {
console.log('======e', img.height, img.width);
document.body.appendChild(div)
console.log('=====测量', div.getBoundingClientRect());
}
img.src = '400.jpg'//原图是400*400
img.style.width = '100%'
img.style.display = 'block'
div.className = 'haha'
div.innerHTML = '<div>789789</div>'
div.appendChild(img)
document.body.appendChild(div)
//delay()
console.log('======delay之后');
function delay() {
var start = Date.now()
while (Date.now() - start < 4000) { }
}
img的宽度设置了百分比,并且在img的onload事件中,如果图片被appendChild到了页面中,比如执行了
div.appendChild(img);document.body.appendChild(div)语句
那么在onload事件中获得的e.width会根据父级宽度计算百分比。
如果没被加到页面中,那么只会是原始的图片宽度