Jquery：计算隐藏输入的宽度答案

【问题标题】：Jquery: calculating width of hidden input [duplicate]Jquery：计算隐藏输入的宽度
【发布时间】：2011-10-18 00:01:20
【问题描述】：

非常简单的任务：使用 jquery 我需要在输入显示在屏幕上之前计算输入的宽度。

http://jsfiddle.net/ajbeaven/mKQx9/

为方便起见，这里是代码：

<div style="display:none;">
    <input />
</div> 

<script type="text/javascript">
    $(function () {
        alert($('input').width());
        $('div').show();
    });
</script>

警报总是显示0

如何计算宽度而不必强制使元素可见，计算宽度，然后再次隐藏它们？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

你不能。根据定义，隐藏元素的宽度为0。

如果您需要计算尺寸，您也许可以在屏幕外“显示”它（在某个奇怪的位置，例如 left: -9999px; top: -9999px。

此外，这似乎与以下内容重复：jQuery - Get Width of Element when Not Visible (Display: None)

【讨论】：

【解决方案2】：

您必须“强制使元素可见，计算宽度，然后再次隐藏它”没有其他选择。如果不是因为您的阻塞调用来提醒浏览器，则在显示时间元素期间不会呈现更改。您可以通过显示它、抓住宽度并在警报之前再次隐藏它来修复它，例如：

$('div').show();
var w = $('input').width();
$('div').hide();

alert(w);
$('div').show();

编辑回应下面的评论。您应该在不同的浏览器上对此进行测试（它至少可以在 Google Chrome 的最新陈旧版本中使用）

var w;
(function(){
    var thediv = $('input').get(0);
    var $copy = $(thediv);
    if(window.getComputedStyle)
            $copy.get(0).style = window.getComputedStyle(thediv,null);
    else if(thediv.currentStyle)
            $copy.get(0).style = thediv.currentStyle;
    w = $copy.width();
})();

alert(w);
$('div').show();

【讨论】：

嗯，伤心。不幸的是，现实并非如此简单，因为输入在树的深处，其中许多父母也可以是display:none;。还是谢谢！
@ajbeaven 嗨，我更新了我的解决方案。它可能需要一些调整才能使其跨浏览器，但我认为它相当强大。
@ajbeaven，谢谢。我想我可能会摆弄它并确保它是跨浏览器的，然后用它或其他东西发表一些博客文章。我已经看到了很多更复杂的解决方案，而且很多人都在尝试这样做，所以它可以帮助其他人，对吧？
@Paulpro 我同意这是个好主意，不幸的是它在 Chrome 44.0.2403.155 上不起作用（或者我无法管理它）

【解决方案3】：

您可以从display: none 更改为visibility: hidden，它会给出一个非零宽度，但您知道它会占用输出空间，可能不是您想要的。

【讨论】：

【解决方案4】：

我找到了一个解决方案，我认为它会增加关于这个“问题”的 SO 内容。

(function ($) {
    $.fn.getHiddenDimensions = function (includeMargin) {
        var $item = this,
        props = { position: 'absolute', visibility: 'hidden', display: 'block' },
        dim = { width: 0, height: 0, innerWidth: 0, innerHeight: 0, outerWidth: 0, outerHeight: 0 },
        $hiddenParents = $item.parents().andSelf().not(':visible'),
        includeMargin = (includeMargin == null) ? false : includeMargin;

        var oldProps = [];
        $hiddenParents.each(function () {
            var old = {};

            for (var name in props) {
                old[name] = this.style[name];
                this.style[name] = props[name];
            }

            oldProps.push(old);
        });

        dim.width = $item.width();
        dim.outerWidth = $item.outerWidth(includeMargin);
        dim.innerWidth = $item.innerWidth();
        dim.height = $item.height();
        dim.innerHeight = $item.innerHeight();
        dim.outerHeight = $item.outerHeight(includeMargin);

        $hiddenParents.each(function (i) {
            var old = oldProps[i];
            for (var name in props) {
                this.style[name] = old[name];
            }
        });

        return dim;
    }
} (jQuery));

来源：http://www.foliotek.com/devblog/getting-the-width-of-a-hidden-element-with-jquery-using-width/

【讨论】：

【解决方案5】：

试试这个：

<div id="test" style="display:none;">
  <input type="text"/>
</div> 

<script type="text/javascript">
  $(function () {
    $('#test').css({ position: "absolute", visibility: "hidden", display: "block" });
    var width = $('#test').width();
    $('#test').css({ position: "", visibility: "", display: "none" });
  });
</script>

【讨论】：