1.div写在页面上,用js给他填充内容之后,然后.height()获取他的高度,不管怎么样取到的高度都是页面上原来没有填充内容之前的div的高度(我没有给div设置高度)
2.如果给div设置一个min-height,这样不管div高度怎么变化,取到的高度都是min-height的值问题:那div高度自适应,有没有办法取得高度增大后的高度,height()方法好像不行,原生的js offsetHeight好像也是取不到值(看了看jquery源码,没咋看懂它的height()怎么取值的,所以来问问大神们)divjquery

解决方案 »

  1.   

    这是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;}
      

  2.   

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

  3.   

    注意一下$(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());
                    }
                });
      

  4.   

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

  5.   

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