Question

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

以下是为方便起见的代码：

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

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

警报始终显示0

如何在不必强行使元素可见的情况下计算宽度，计算宽度，然后再次隐藏它们？

Answer 1

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

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

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

Answer 2

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

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

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

编辑回复以下评论。您应该在不同的浏览器上测试它（至少在最新的谷歌浏览器版本中有效）

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();

Answer 3

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

Answer 4

我找到了一个解决方案，我认为这个解决了这个“问题”的问题。

(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/

Answer 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>

Jquery：计算隐藏输入的宽度

5 个答案: