jqeury height()获取高度自适应div高度问题

艾小仙 2013-01-16 09:37:52

1.div写在页面上，用js给他填充内容之后，然后.height()获取他的高度，不管怎么样取到的高度都是页面上原来没有填充内容之前的div的高度（我没有给div设置高度）
2.如果给div设置一个min-height，这样不管div高度怎么变化，取到的高度都是min-height的值

问题：那div高度自适应，有没有办法取得高度增大后的高度，height()方法好像不行，原生的js offsetHeight好像也是取不到值（看了看jquery源码，没咋看懂它的height()怎么取值的，所以来问问大神们）

...全文

2072 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

義東 2013-01-16

打赏
举报

你用了异步，当你异步去获取数据的时候，程序继续往下执行，当你获取div高度的时候，异步还没返回数据进行填充，所以获取的高度是之前的。将代码放到回调函数里面就行了

艾小仙 2013-01-16

打赏
举报

引用 4 楼 bbjbepzz 的回复:

你把var height = parseInt($(this).height()); 放到$.get的回调函数里面，放到$(".pop-info .mess").show();后面看下

你说的对，我知道了。因为是异步的方法，请求没有返回，没有填充内容，js就往下走了所以得到的还是原来的高度。我日，又犯了这种NC的错误，方法改成同步或者用你说的放在方法里面都可以多谢提醒了哈哈

bbjbepzz 2013-01-16

打赏
举报

引用 4 楼 bbjbepzz 的回复:

你把var height = parseInt($(this).height()); 放到$.get的回调函数里面，放到$(".pop-info .mess").show();后面看下

注意一下$(this)在$.get()回调函数里面要改下 var _this = $(this); $.get("searchUserById.action?uid=" + uid,null,function(data){ if(data != "error"){ $(".pop-info .photo img").attr("src",data.head_photo); $(".pop-info .info a").html(data.nick); if(data.sex == 1){ $(".pop-info .add-sex img").attr("src","../img/icon-male.png"); } else if(data.sex == 2){ $(".pop-info .add-sex img").attr("src","../img/icon-female.png"); } $(".pop-info .add-add").html(data.address); $(".pop-info .follow").html(data.follow); $(".pop-info .fans").html(data.fans); $(".pop-info .status").html(data.status); $(".pop-info .intro .p1").html(data.intro); $(".pop-info .loading").hide(); $(".pop-info .mess").show(); alert(_this.height()); } });

bbjbepzz 2013-01-16

打赏
举报

你把var height = parseInt($(this).height()); 放到$.get的回调函数里面，放到$(".pop-info .mess").show();后面看下

艾小仙 2013-01-16

打赏
举报

引用 2 楼 bbjbepzz 的回复:

可以给点代码不？

这是html页面上的代码，头像弹出层


<!-- 弹出层，人物详情 -->
    <div class="pop-info">
        <div class="span-hide mess">
            <div class="photo">
                <a href="#"><img src="../img/test.jpg" /></a>
            </div>
            <div class="info">
                <p>
                    <label><a href="#"></a></label>
                </p>
                <p class="add">
                    <label class="add-sex"><img src="" /></label>
                    <label class="add-add"></label>
                </p>
                <div class="blog">
                    <label class="label-color">关注</label><label class="p1 follow"></label>
                    |
                    <label class="label-color">粉丝</label><label class="p1 fans"></label>
                    |
                    <label class="label-color">微博</label><label class="p1 status"></label>
                </div>
            </div>
             <div class="intro">
                    <label class="label-color">简介:</label><label class="p1"></label>
             </div>
            <div class="option">
                 <a href="" class="pure">标记</a>
                 <a href="" class="pure">关注</a>
            </div>
        </div>
        <span class="bot-bot span-hide"></span>
        <span class="bot-top span-hide"></span>
        <span class="top-bot span-hide"></span>
        <span class="top-top span-hide"></span>
        <p class="span-hide loading">
            <img src="../img/022.gif" />
            <label>正在加载，请稍后...</label>
        </p>
    </div>

这是当鼠标移动到头像上，请求后台返回数据，填充html，这时候高度会撑大


$(".covf .fl").hover(function(){
            clearTimeout(hoverTimeout);
            clearTimeout(hoverTimeout2);
            var uid = $(this).attr("uid");
            $(".pop-info .mess").hide();
            $(".pop-info .loading").show();
            $.get("searchUserById.action?uid=" + uid,null,function(data){
                if(data != "error"){
                    $(".pop-info .photo img").attr("src",data.head_photo);
                    $(".pop-info .info a").html(data.nick);
                    if(data.sex == 1){
                        $(".pop-info .add-sex img").attr("src","../img/icon-male.png");
                    } else if(data.sex == 2){
                        $(".pop-info .add-sex img").attr("src","../img/icon-female.png");
                    }
                    $(".pop-info .add-add").html(data.address);
                    $(".pop-info .follow").html(data.follow);
                    $(".pop-info .fans").html(data.fans);
                    $(".pop-info .status").html(data.status);
                    $(".pop-info .intro .p1").html(data.intro);
                    $(".pop-info .loading").hide();
                    $(".pop-info .mess").show();
                }
            });

            var pos = $(this).offset();
            var height = parseInt($(this).height()); //当前div高度
            var left = parseInt(pos.left); //当前div左位移
            var top = parseInt(pos.top); //当前div顶部位移
            var divHeight = parseInt($(".pop-info").height()); //弹出层高度
            //------这里我打印看了看这个divHeight,怎么都不会变，都是页面上代码的那点高度
            console.log(divHeight + "//" + $(".pop-info").get(0).clientHeight);
            var scrollTop = parseInt($(document).scrollTop()); //滚动条到顶部高度
            var borderLeftPx = $(".pop-info span").css("left"); //尖角距离左边位移
            var borderLeft = parseInt(borderLeftPx.substring(0, borderLeftPx.indexOf("px")));
            var borderTopPx;
            var borderTop;
            //当前位置到窗口高度小于要显示的div高度
            if((top - scrollTop) < divHeight){
                $(".pop-info .bot-bot").hide();
                $(".pop-info .bot-top").hide();
                $(".pop-info .top-bot").show();
                $(".pop-info .top-top").show();
                borderTopPx  = $(".pop-info .top-top").css("top"); //尖角距离div高度位移
                borderTop = parseInt(borderTopPx.substring(0, borderTopPx.indexOf("px")));
                $(".pop-info").fadeIn();
                $(".pop-info").css({left:(left - borderLeft) + 'px',top:(top + height - borderTop) + 'px'});
            } else {
                $(".pop-info .top-bot").hide();
                $(".pop-info .top-top").hide();
                $(".pop-info .bot-bot").show();
                $(".pop-info .bot-top").show();
                borderTopPx = $(".pop-info .bot-top").css("bottom"); //尖角距离div高度位移
                borderTop = parseInt(borderTopPx.substring(0, borderTopPx.indexOf("px")));
                $(".pop-info").fadeIn();
                $(".pop-info").css({left:(left - borderLeft) + 'px',top:(top - divHeight + borderTop) + 'px'});
            }
    },function(){
        hoverTimeout  = setTimeout(function(){
                $(".pop-info").fadeOut(0);
        },100);
    });

这是css，这里我给了个min-height，所以一直取到的是这个值，但是我去掉也没用，取到的是页面上div的原来的高度


.pop-info{display:none;min-height:140px;background-color:#fff; border-radius: 8px; width:300px;box-shadow:0 0 15px #9B9391;-moz-box-shadow:0 0 15px #9B9391;-webkit-box-shadow:0 0 15px #9B9391;border:1px solid #beceeb;position: absolute;z-index: 99999;line-height: 20px;}

bbjbepzz 2013-01-16