[jQuery]沒法獲取隱藏元素（display:none）寬度(width)和高度(height)的新解決方案

在作茶城網改版工做的時候，又遇到一個新問題，我須要用jQuery寫一個經過點擊左右圖標來翻閱圖片的小插件，寫好後測試能夠正常運行，可是放到Tab中後發現只有第一個Tab中的代碼可以正常運行，其它所有罷工了。

 

　　用Chrome自帶的開發工具一查，發現罷工的Tab中。小插件一些重要元素的寬度都變成「0」了，由於這個小插件須要計算動態寬度來實現，因而立刻想到是小插件中的寬度獲取失敗了，果不其然。

 

　　汗，竟然一直沒發現jQuery沒法獲取隱藏元素 （display:none）的寬度 (width)和高度 (height)，爲了兼容IE6，我用1.x版，並且是官方最新的1.10.2版，不知道在2.x版中這個問題有沒有解決。

 

　　既然jQuery都不支持，那麼Javascript也就確定不支持了，網上搜索了一下，有個解決方案是用 visibility:hidden來代替 display:none，因爲 visibility:hidden佔用物理空間，所以能夠獲取寬高。

 

　　問題是這須要我去改動已經寫好的Tab插件，這種拆東牆補西牆的事情，總會讓人感受不爽的。長時間搜索其它解決方案無果，就在我快要妥協的時候，忽然眼前一亮，發現了個好東西： jQuery Actual

 

　　能夠說它幾乎完美的解決了這個問題，並且使用方法極其簡單，使用 $('#someElement').actual('width')的方式來代替 $('#someElement').width()就能夠了，兼容性也十分出色，能夠兼容IE6瀏覽器，壓縮後體積只有1.1K也是一大亮點，更牛的是還支持inner和outer的計算。

 

官方信息

• jQuery Actual 官網
• jQuery Actual 演示
• jQuery Actual 文檔
• jQuery Actual 下載

 

jQuery版本要求

• jQuery 1.2.3+

 

所兼容的瀏覽器

• Firefox 2.0+
• Internet Explorer 6+
• Safari 3+
• Opera 10.6+
• Chrome 8+

安裝方法

• HTML文檔須要聲明DOCTYPE
• 引用JS文件便可

  <script type="text/javascript" src="path/jquery.min.js"></script>
  <script type="text/javascript" src="path/jquery.actual.js"></script>

使用方法

• 代碼範例

• //get hidden element actual width
  $('.hidden').actual('width');
  
  //get hidden element actual innerWidth
  $('.hidden').actual('innerWidth');
  
  //get hidden element actual outerWidth
  $('.hidden').actual('outerWidth');
  
  //get hidden element actual outerWidth and set the `includeMargin` argument
  $('.hidden').actual('outerWidth',{includeMargin:true});
  
  //get hidden element actual height
  $('.hidden').actual('height');
  
  //get hidden element actual innerHeight
  $('.hidden').actual('innerHeight');
  
  //get hidden element actual outerHeight
  $('.hidden').actual('outerHeight');
  
  // get hidden element actual outerHeight and set the `includeMargin` argument
  $('.hidden').actual('outerHeight',{includeMargin:true});
  
  //if the page jumps or blinks, pass a attribute '{ absolute : true }'
  //be very careful, you might get a wrong result depends on how you makrup your html and css
  $('.hidden').actual('height',{absolute:true});
  
  // if you use css3pie with a float element
  // for example a rounded corner navigation menu you can also try to pass a attribute '{ clone : true }'
  // please see demo/css3pie in action
  $('.hidden').actual('width',{clone:true});

  我的以爲jQuery官方應該考慮將這個功能寫進內核，那就更方便了。爲了防止之後jQuery Actual的官網打不開（如今就時不時會和諧）或者下載不了，在這裏存一份jquery.actual.js的源碼，以備不時只需。

• 源碼：jquery.actual.js

  ;( function ( $ ){
   $.fn.addBack = $.fn.addBack || $.fn.andSelf;
  
   $.fn.extend({
  
     actual : function ( method, options ){
       // check if the jQuery method exist
       if( !this[ method ]){
         throw '$.actual => The jQuery method "' + method + '" you called does not exist';
       }
  
       var defaults = {
         absolute      : false,
         clone         : false,
         includeMargin : false
       };
  
       var configs = $.extend( defaults, options );
  
       var $target = this.eq( 0 );
       var fix, restore;
  
       if( configs.clone === true ){
         fix = function (){
           var style = 'position: absolute !important; top: -1000 !important; ';
  
           // this is useful with css3pie
           $target = $target.
             clone().
             attr( 'style', style ).
             appendTo( 'body' );
         };
  
         restore = function (){
           // remove DOM element after getting the width
           $target.remove();
         };
       }else{
         var tmp   = [];
         var style = '';
         var $hidden;
  
         fix = function (){
           // get all hidden parents
           $hidden = $target.parents().addBack().filter( ':hidden' );
           style   += 'visibility: hidden !important; display: block !important; ';
  
           if( configs.absolute === true ) style += 'position: absolute !important; ';
  
           // save the origin style props
           // set the hidden el css to be got the actual value later
           $hidden.each( function (){
             var $this = $( this );
  
             // Save original style. If no style was set, attr() returns undefined
             tmp.push( $this.attr( 'style' ));
             $this.attr( 'style', style );
           });
         };
  
         restore = function (){
           // restore origin style values
           $hidden.each( function ( i ){
             var $this = $( this );
             var _tmp  = tmp[ i ];
  
             if( _tmp === undefined ){
               $this.removeAttr( 'style' );
             }else{
               $this.attr( 'style', _tmp );
             }
           });
         };
       }
  
       fix();
       // get the actual value with user specific methed
       // it can be 'width', 'height', 'outerWidth', 'innerWidth'... etc
       // configs.includeMargin only works for 'outerWidth' and 'outerHeight'
       var actual = /(outer)/.test( method ) ?
         $target[ method ]( configs.includeMargin ) :
         $target[ method ]();
  
       restore();
       // IMPORTANT, this plugin only return the value of the first element
       return actual;
     }
   });
  })( jQuery );

   此上是轉載別人的文章。

• 此外我還發現，若是以爲上述方法不曾聽過或者不知道，可是要知道緣由，爲何會取不到高度，這是今天一直困擾個人問題。由於我在獲取高度以前，對前面的元素添加了隱藏的動做，我用的是hide()，可是在頁面的標籤上就會造成display:none;這個動做，因此以後我再取值就得不到了。讀了上述以後，瞬間明白。jQuery沒法獲取隱藏元素（display:none）的寬度(width)和高度(height)，解決方案是用visibility:hidden來代替display:none，因爲visibility:hidden佔用物理空間，所以能夠獲取寬高。