Getting width of div with a parent display: none in Jquery Tab Control

问题

I have a jquery tab control in which I am building a custom control I've create which needs to know the width of itself during the build process.

My problem is when put into a parent container, in this case a tab, which has a 'display: none' I am unable to calculate the width.

I've tried it both ways in my control:

$('.DataRow').width()
$('.DataRow').css('width')

both return 0.

Is there any other way to get at this width value?

回答1:

I have often used this visibility: hidden technique. You can test width when visibility:hidden, but not display:none. Both hide the visibility of the element, however display:none behaves differently in that it does not take up any "space" in the DOM.

Given this markup:

<div id="parent" style="display: none">
    <div> find my width </div>
</div>

Test the width:

$('#parent').css('visibility', 'hidden').show();
var w = $('#parent div').width();
$('#parent').css('visibility', 'visible').hide();
console.log('width: ', w);

Outputs:

> width:  496

Proof

Update:

With jQuery UI Tabs you can do something like this:

$('#tabs-3').css('visibility', 'hidden').removeClass('ui-tabs-hide');

Where '#tabs-3' is the hidden tab. See this fiddle for more information.

回答2:

I'm sure theres' a better way, but as a quick fix:

$('.DataRow').show(); //show it
var w = $('.DataRow').width()  //get the width
$('.DataRow').hide(); //hide it

The code executes so quickly you'll never see it. (might wanna check it on slower/older browsers though) Like i said, this is a quick fix - i've had to do it myself and it works, but i'm sure there's a better way.

来源：https://stackoverflow.com/questions/5903147/getting-width-of-div-with-a-parent-display-none-in-jquery-tab-control