亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何獲取一個動態添加的img的高度?

如何獲取一個動態添加的img的高度?

碼農2號 2018-04-16 17:13:44
此處為代碼:<!DOCTYPE html><html lang="en"><head>????<meta charset="UTF-8">????<title>碎裂輪播圖</title>????<style>????????*{????????????margin: 0px;????????????padding: 0;????????}????????li{????????????list-style: none;????????}????????.clearfix:after {??????? ? ?content: " ";??????? ? ?display: block;??????? ? ?clear: both;??????? ? ?height: 0;???????}???????????????.clearfix {??????? ? ?zoom: 1;???????}???????.fl{???????????float: left;???????}????????.container{????????????width: 100% ;????????????position: relative;????????}????????.bannerUl{????????????width: 100%;????????????height: 100%;????????????position: absolute;????????????top: 0;????????????left: 0;????????}????????.bannerUl li{????????????width: 25%;????????????height: 25%;????????}????</style></head><body>????<div class="container">????????????</div>????<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>????<script>????????// 輪播圖父容器????????var container=$('.container');????????// 輪播圖圖片地址????????var arr=['./img/banner.png','./img/banner2.png','./img/banner3.jpg'];????????// 在body里面添加一個圖片,以此來動態獲取container高度。????????$('body').append('<img src="./img/banner.png" alt="" class="heightImg">');????????$('.heightImg').css({'width':'100%','position':'absolute','top':'100000px'});????????var containerHeight=$('.heightImg').css('height');????????console.log($('.heightImg'))????????console.log($('.heightImg')[0].offsetHeight)????????console.log($('.heightImg')[0].height)????????console.log($('.heightImg').outerHeight())????????console.log($('.heightImg').height())????????console.log(containerHeight);????????// var ULstr='<ul class="bannerUl clearfix"></ul>';????????// var LIstr='<li class="fl"></li>';????????// var topNum=0;????????// var leftNum=0;????????// for(var i=0;i<arr.length;i++){????????// ?container.append(ULstr);????????// ?var ulBox=$('.bannerUl').eq(i);????????// ?for(var j=0;j<16;j++){????????// ?????ulBox.append(LIstr);????????// ?}????????// }????</script></body></html>說明:閑來無事,想做個具有破碎效果的輪播圖備用,希望不要用到react、vue、node等,將來可以兼容各種方法、環境。因為不固定container的高度,所以添加一個圖片,獲取該圖片在width:100%;時候的高度,然后設置給container,在獲取img高度的時候獲取不到,所有打印的高度都是0px,想看看大佬們除了鉤子函數的方法還有沒有其他更簡單的方法了能夠獲取img的高度?
查看完整描述

3 回答

?
weixin_慕村6077032

TA貢獻1條經驗 獲得超0個贊

同問題,你解決了嗎

查看完整回答
反對 回復 2021-01-26
?
qq_名夏_03454605

TA貢獻1條經驗 獲得超0個贊

用圖片的onload事件,你這個之所以獲取的高度為0,是因為圖片沒加載完吧
var img = document.createElement('img');
img.onload = function(){

????var height = img.offsetHeight; //圖片的高度

};

$(body).append(img);

查看完整回答
反對 回復 2018-04-17
  • 碼農2號
    碼農2號
    嗯,應該是加載問題,你這方法我早晨的時候試了,onload的函數就沒有進去,更不用說返回一個數值了。
?
web_東

TA貢獻2條經驗 獲得超1個贊

https://img1.sycdn.imooc.com//5ad4ddd000018dda13660768.jpg

高度要設成100%

查看完整回答
反對 回復 2018-04-17
  • 碼農2號
    碼農2號
    高度設置成100%,圖片會拉伸,并不是動態的高度。 var containerHeight=$('.heightImg').css('height');這行我想要獲取高度,并非是設置高度。想獲取的高度是問題里面第二張圖圈起來的部分。
  • 3 回答
  • 0 關注
  • 4493 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號