Jquery：计算隐藏输入的宽度

非常简单的任务：使用jquery我需要计算输入的宽度，然后才能在屏幕上看到输入。Jquery：计算隐藏输入的宽度

这里是为了方便代码：

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

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

警报总是显示0

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

来源

2011-08-02 ajbeaven

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

如果你需要计算维度，你也许能逃脱“显示”，它的屏幕外（在一些奇怪的位置，像left: -9999px; top: -9999px

此外，这似乎是一个重复：jQuery - Get Width of Element when Not Visible (Display: None)

来源

2011-08-02 06:42:28 OverZealous

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

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

来源

2011-08-02 06:45:13 Paulpro

http://jsfiddle.net/mKQx9/1/ – Paulpro

嗯，伤心。不幸的是，现实并非如此简单，因为投入深入树木，其中许多父母也可以“显示：无”。不管怎么说，还是要谢谢你！ – ajbeaven

@ajbeaven嗨，我更新了我的解决方案。它可能需要一些调整才能使其跨浏览器，但我认为它是相当健壮的。 – Paulpro

您可以从display: none更改为visibility: hidden，它会给一个非零宽度（它至少在谷歌浏览器的最新陈旧版本的作品），但你知道它占用输出空间，可能不是你想要的。

来源

2011-08-02 06:45:52

试试这个：

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

来源

2011-08-02 06:51:55 Calvin

我发现了一个解决方案，我认为增加了什么是对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/

来源

2011-08-02 07:04:08 ajbeaven

Jquery：计算隐藏输入的宽度

回答

相关问题