Jquery：計算隱藏輸入的寬度

Question

非常簡單的任務：使用jquery我需要計算輸入的寬度，然後才能在屏幕上看到輸入。

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

這裏是爲了方便代碼：

<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

試試這個：

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

Answer 5

我發現了一個解決方案，我認爲增加了什麼是對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/