使用父显示获取div的宽度:Jquery Tab控件中没有 [英] Getting width of div with a parent display: none in Jquery Tab Control

问题描述

我有一个jquery标签控件，在其中构建自己创建的自定义控件，该控件在构建过程中需要知道自身的宽度.

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

都返回0.

还有其他方法可以获取此宽度值吗?

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

推荐答案

我经常使用这种visibility: hidden技术.您可以在visibility:hidden时测试宽度，但不能测试display:none.两者都隐藏了元素的可见性，但是display:none的行为有所不同，因为它在DOM中不占用任何空格".

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.

给出此标记:

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

测试宽度:

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

输出:

> width:  496

证明

使用jQuery UI选项卡，您可以执行以下操作:

With jQuery UI Tabs you can do something like this:

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

其中'#tabs-3'是隐藏的选项卡.有关更多信息，请参见此小提琴.

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

这篇关于使用父显示获取div的宽度:Jquery Tab控件中没有的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！