jQuery outerHeight for hidden element

I am having a problem with getting the outer height of a list item - similar to the below post: jQuery: Get height of hidden element in jQuery

Here is my code:

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'开发者_C百科 });
};

Am i doing something wrong?

I have blogged about this issue before since there are a few other similar questions here on stackoverflow. Take a look at the code in this blog post

I initially developed it just for the width method, but based on comments the code has evolved to include inner/outer dimensions.

You may not get the height/widith of hidden(display:none;) elements in all the browsers. Try to show the element and hide it after you get the height.

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' });
};

If you are using display: none you may consider to use position absolute with some huge margin. eg position:absolute;left:-999999px; instead.

I think you're confusing visibility and display. visibility shows the space for the element on the page, but doesn't actually render it. display: none won't show the element or the space it fills.

So when you set

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

You're actually completely hiding the element