Question

我在获取列表项的外部高度方面遇到问题 - 类似于以下帖子： jQuery: Get height of hidden element in jQuery

这是我的代码：

function tabload() {
    $('.tab li:first-child').addClass('selected');

    $(".tab ul").css({ 'position': 'absolute', 'visibility': 'hidden', 'display': 'block'});

    var h = $(".tab ul").outerHeight(true);

    $(".tab ul").css("height", h);

    $(".tab ul").css({'position': 'relative', 'visibility': 'visible', 'display': 'none' });
};

我做错了吗？

Answer 1

我之前在博客上发表过关于此问题的博客，因为在stackoverflow上还有其他一些类似的问题。请查看此blog post

中的代码

我最初只是为宽度方法开发它，但基于注释，代码已经发展到包含内/外维度。

Answer 2

您可能无法获得所有浏览器中隐藏（display：none;）元素的高度/宽度。尝试显示元素并在获得高度后隐藏它。

function tabload() {
    $('.tab li:first-child').addClass('selected');

    $(".tab ul").show();

    var h = $(".tab ul").outerHeight(true);

    $(".tab ul").css("height", h);

    $(".tab ul").css({'position': 'relative', 'visibility': 'visible', 'display': 'none' });
};

Answer 3

如果您使用的是display：none，您可以考虑使用绝对位置以及一些巨大的余量。例如：position：absolute; left：-999999px;代替。

Answer 4

我认为你让visibility和display感到困惑。 visibility显示页面上元素的空间，但实际上并未呈现它。 display: none不会显示其填充的元素或空间。

所以当你设置

$(".tab ul").css({'position': 'relative', 'visibility': 'visible', 'display': 'none' });

你实际上完全隐藏了元素

jQuery outerHeight用于隐藏元素

4 个答案: