outerHeight(true)给出错误的值
我想要一个容器元素的高度,包括边距和填充。
当我将鼠标hover在Chrome开发工具中的元素上时,我获得了我正在寻找的值,但是当我使用jQuery $('element').outerHeight(true)
时,我将获得$('element').outerHeight(true)
; 我得到的价值要小得多。
该元素包含一个jQuery轮播(在一个容器中, position:relative
,items position: absolute
),是否与它有关?
提前致谢
我已经多次遇到过这个问题,而且没有使用任何插件或unruly setTimeout函数的最佳解决方案是使用hook进入浏览器的onLoad事件。 使用jQuery,它是这样完成的:
$(window).load(function(){ ...outerHeight logic goes here... });
这可能与您的标准$(function(){ ...code... });
完全分开$(function(){ ...code... });
因此,所有其他正常工作的代码都不必等到页面上的每个元素都加载完毕。
为什么会出现这种情况:
Chrome具有与Firefox不同的渲染算法,这使得它在页面上的所有元素被完全绘制/显示之前触发onLoad事件,并且可供jQuery选择和检索高度。 setTimeout()
大部分时间都可以工作,但是你不希望依赖于那些本质上如此盲目的东西 – 谁知道,将来这个Chrome中的“怪癖”可以修复! 🙂
我有同样的问题。 通过使用setTimeout等待一点,我在Chrome中获得了正确的高度:
setTimeout ( function () { var ht = $('.my-class').outerHeight( true ); }, 1);
我希望有所帮助!
我遇到了同样的问题。
Firefox外部高度通过console.log:430 Chrome外观高度通过console.log:477
真正的外部高度(萤火虫布局):820
打开Firebug或删除状态栏后,它在console.log中设置了正确的值(820)(因此代码可以正常工作)。
问题是由于图像。 即使您在文档准备就绪时运行它,但并非所有图像都可能已加载,因此计算错误。
我正在使用desandro的插件,它解决了我的问题。 https://github.com/desandro/imagesloaded
我想你可能需要
.outerHeight({margin: true});
按照这里 :
可以通过传递边距设置为true的选项图来包含边距。
对我来说应该完全正常工作的那个是@Matt Reilly和@Lasha答案的组合
$(window).load(function() { setTimeout(function() { // all the logic in here }, 1); });
我以前把代码放在$(document).ready(function(){...});
但它有时变得有些,所以上面的工作完美无缺。
如果窗口已加载并且文档已准备就绪并且您已经考虑了浮动并且仍然遇到此问题,那么请考虑查找具有相同ID的元素。 确保使用jQuery选择器获得正确的元素。 我忘了我在dom中有另一个元素与完全相同的id。 考虑使用jQuery更改背景颜色以进行validation。
尝试了这些解决方案中的每一个。 最后打开检查员,意识到我的p
仍然有一个margin-top
。 一如既往地感谢Normalize ……
使用outerHeight时,未正确考虑内部隐藏,固定和绝对元素。
试试scrollHeight属性:
$('element').prop('scrollHeight')
根据文档 , 在以下情况下 , outerHeight
不保证准确:
- 页面被缩放
- 隐藏元素或其父元素
有点破解。 将代码放在jquery中加载,滚动和resize如下:
$(window).on('load scroll resize', function(){ //outerHeight code });