js获取高度自适应DIV的高度问题

果-果 2014-02-27 02:42:23
1.div写在页面上,用js给他填充内容之后,然后.height()获取他的高度,不管怎么样取到的高度都是页面上原来没有填充内容之前的div的高度(我没有给div设置高度)

2.如果给div设置一个min-height,这样不管div高度怎么变化,取到的高度都是min-height的值


大概就这样的情况,请高手指点一下,什么原因,怎么解决,谢谢
...全文
3331 15 打赏 收藏 转发到动态 举报
写回复
用AI写文章
15 条回复
切换为时间正序
请发表友善的回复…
发表回复
未知数 2014-02-27
  • 打赏
  • 举报
回复
引用 3 楼 jenny_2011 的回复:
[quote=引用 2 楼 wzs_xyz 的回复:] [quote=引用 1 楼 jenny_2011 的回复:] http://www.myexception.cn/javascript/1169489.html 这里有个解决方法,能解决问题,但始终不明白,把高定义到最后,之前的函数代码是怎么获取到的,取到的应该是undefined才对啊
自己写两个alert,一个在你原来的位置,一个在别人告诉你的位置,然后你就明白到底谁先谁后了,代码不是写在前面就一定会先执行的[/quote] 我是这么做的,console出来看的,人家告诉的位置是对的,打印出来正常,我之前定义的位置始终是原始高度,但我不明白,这个道理说不通啊[/quote] 回调函数是异步调用的,也就是说你那儿写的代码是在函数中,但该函数不会马上执行,而是会等到请求从服务端返回后再执行,所以就执行在后了
打字员 2014-02-27
  • 打赏
  • 举报
回复

 html += '<div id="' + Util.ToolTip.tipID + '" class="' + Util.ToolTip.toolClass + '" style="display:none">';
你的div在進行css樣式設置的時候是display:none的,所以獲取不到尺寸 你可以這樣 <div style="position:absolute;left:-10000px;top:-10000px;"></div> 等獲取到尺寸后,再設置left|top把它放到正確的位置
Csharp_琪 2014-02-27
  • 打赏
  • 举报
回复
果果姊姊,好久不见,纯属打招呼,不用给分~
果-果 2014-02-27
  • 打赏
  • 举报
回复
引用 11 楼 showbo 的回复:
没见你填充内容的代码,都是控制样式的

Util.ToolTip = {
    x: 10,
    y: 10,
    zindex: 999,
    timer: 200,
    toolClass: 'tool-tip',
    tipClass: 'ToolTips',
    tipID: 'ToolTip',
    wid: 300,
    init: function() {
        $('.' + Util.ToolTip.tipClass).bind('mouseenter',
        function(e) {
            Util.stopBubble(e);
            var self = $(this);
            var txt = self.attr('data-text');
            Util.ToolTip.createHTML(self, txt)
        }).click(function(e) {
            Util.stopBubble(e);
            var self = $(this);
            var txt = self.attr('data-text');
            if (typeof($('#' + Util.ToolTip.tipID)[0]) === 'undefined') {
                Util.ToolTip.createHTML(self, txt)
            };
            return false
        })
    },
    createHTML: function(self, txt) {
        if (! (txt == '' || txt == 'undefined' || txt == null)) {
            $('#' + Util.ToolTip.tipID).remove();
            var items = [],
            html = '';
            items = $.trim(txt).split("|");
            if (self.hasClass('ToolTipCol')) {
                html += '<div id="' + Util.ToolTip.tipID + '" class="' + Util.ToolTip.toolClass + '" style="display:none">';
                html += '<div class="items tool-tip-col">' + items + '</div>'
            } else if (self.hasClass('ToolTipCols')) {
                html += '<div id="' + Util.ToolTip.tipID + '" class="' + Util.ToolTip.toolClass + '" style="width:320px;display:none">';
                html += '<div class="items tool-tip-cols">';
                html += '<ul class="title"><li class="y_0">类型</li><li class="y_1">说明</li></ul>';
                html += '<ul>';
                for (var i = 0; i < items.length; i++) {
                    html += '<li class="y_' + i + '">' + items[i] + '</li>'
                };
                html += '</ul>';
                html += '</div>'
            };
            html += '<b class="ar_up"></b><b class="ar_up_in"></b></div>';
            $('body').append(html);
            var tar = $('#' + Util.ToolTip.tipID);			
            Util.getPOP(self, tar, Util.ToolTip.wid);
            tar.mouseleave(function() {
                tar.remove()
            });
            tar.click(function(e) {
                Util.stopBubble(e)
            });
            $(document).click(function() {
                tar.remove()
            })
        }
    }
};
Go 旅城通票 2014-02-27
  • 打赏
  • 举报
回复
没见你填充内容的代码,都是控制样式的
果-果 2014-02-27
  • 打赏
  • 举报
回复
引用 9 楼 showbo 的回复:
tar.fadeIn('slow', function () { var tmpHeight = tar.height(); console.log(tmpHeight); //如果把高度定义在这里,就正常 });
还是不行,这样之前的代码就找不到tmpHeight
Go 旅城通票 2014-02-27
  • 打赏
  • 举报
回复
tar.fadeIn('slow', function () { var tmpHeight = tar.height(); console.log(tmpHeight); //如果把高度定义在这里,就正常 });
果-果 2014-02-27
  • 打赏
  • 举报
回复
代码里的<span style="color: #FF0000;">忽略吧,本想加个红色更显眼的
果-果 2014-02-27
  • 打赏
  • 举报
回复
引用 5 楼 u011461314 的回复:
那就放回调函数里面啊,值还没到。
如果没到,那加个延时也没管用啊
果-果 2014-02-27
  • 打赏
  • 举报
回复
Util.getPOP = function(self, tar, wid) {
console.log(tar.height());//此处永远获取到初始高度
var aTop = self.offset().top;
var aLeft = self.offset().left;
var aHeight = self.outerHeight();
var aWidth = self.outerWidth();
var tmpWidth = tar.width();
var tmpHeight = tar.height();
var tipY = $(window).height() - (aTop + tmpHeight);
var tipX = $(window).width() - (aLeft + tmpWidth);
var tmpTop = aTop;
var tmpLeft = aLeft + aWidth / 2;
var up = tar.find('.ar_up');
var upInner = tar.find('.ar_up_in');
if (self.hasClass('ToolTipCols')) {
tmpWidth = tar.width()
} else {
if (tmpWidth > wid) {
tmpWidth = wid;
} else {
tmpWidth = tar.width()
}
};
if (tipX < Util.ToolTip.x) {
tmpLeft = tmpLeft - (tmpWidth - aWidth / 2) + 5;
up.css({
left: 'auto',
right: '5px',
marginLeft: '0'
});
upInner.css({
left: 'auto',
right: '5px',
marginLeft: '0'
})
} else {
if (tmpLeft < tmpWidth) {
tmpLeft = tmpLeft - aWidth / 2 - 5;
up.css({
left: '5px',
marginLeft: '0'
});
upInner.css({
left: '5px',
marginLeft: '0'
})
} else {
tmpLeft = tmpLeft - tmpWidth / 2
}
};
if (tipY < Util.ToolTip.y) {
tmpTop = tmpTop - aHeight - tmpHeight;
up.addClass('ar_down');
upInner.addClass('ar_down_in')
} else {
tmpTop = tmpTop + aHeight + 12;
if (self.hasClass('ToolTipCols')) {
upInner.css({
'border-color': 'transparent transparent #e8ecef transparent'
})
}
};
tar.css({
position: 'absolute',
top: tmpTop,
left: tmpLeft,
width: tmpWidth,
zIndex: Util.ToolTip.zindex
});
tar.fadeIn('slow');
var tmpHeight = tar.height();
console.log(tmpHeight);//如果把高度定义在这里,就正常
};






Util.ToolTip = {
//此处定义DIV,且调用,tar为自定义DIV
Util.getPOP(self, tar, Util.ToolTip.wid);
zhjdg 2014-02-27
  • 打赏
  • 举报
回复
那就放回调函数里面啊,值还没到。
Go 旅城通票 2014-02-27
  • 打赏
  • 举报
回复
你代码呢,那个帖子是ajax异步填充,如果ajax未返回当然获取不到高度
果-果 2014-02-27
  • 打赏
  • 举报
回复
引用 2 楼 wzs_xyz 的回复:
[quote=引用 1 楼 jenny_2011 的回复:] http://www.myexception.cn/javascript/1169489.html 这里有个解决方法,能解决问题,但始终不明白,把高定义到最后,之前的函数代码是怎么获取到的,取到的应该是undefined才对啊
自己写两个alert,一个在你原来的位置,一个在别人告诉你的位置,然后你就明白到底谁先谁后了,代码不是写在前面就一定会先执行的[/quote] 我是这么做的,console出来看的,人家告诉的位置是对的,打印出来正常,我之前定义的位置始终是原始高度,但我不明白,这个道理说不通啊
未知数 2014-02-27
  • 打赏
  • 举报
回复
引用 1 楼 jenny_2011 的回复:
http://www.myexception.cn/javascript/1169489.html 这里有个解决方法,能解决问题,但始终不明白,把高定义到最后,之前的函数代码是怎么获取到的,取到的应该是undefined才对啊
自己写两个alert,一个在你原来的位置,一个在别人告诉你的位置,然后你就明白到底谁先谁后了,代码不是写在前面就一定会先执行的
果-果 2014-02-27
  • 打赏
  • 举报
回复
http://www.myexception.cn/javascript/1169489.html 这里有个解决方法,能解决问题,但始终不明白,把高定义到最后,之前的函数代码是怎么获取到的,取到的应该是undefined才对啊

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧