无法获取隐藏元素宽度和高度的解决方案

在实际开发中会遇到确实需要获取隐藏元素的宽高，这儿所说的隐藏元素是display为none的元素。

可使用jquery actual plugin插件来完成，其源码如下：

;( 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,
    display    : 'block'
   };
   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: ' + configs.display + ' !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 (){
      // save original style. if no style was set, attr() returns undefined
      var $this   = $( this );
      var thisstyle = $this.attr( 'style' );
      tmp.push( thisstyle );
      // retain as much of the original style as possible, if there is one
      $this.attr( 'style', thisstyle ? thisstyle + ';' + 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);

 

当然如果要支持模块化开发，直接使用官网下载的文件即可，源码也贴上：

;( function ( factory ) {
if ( typeof define === 'function' && define.amd ) {
  // amd. register module depending on jquery using requirejs define.
  define( ['jquery'], factory );
} else {
  // no amd.
  factory( jquery );
}
}( 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,
    display    : 'block'
   };
   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: ' + configs.display + ' !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 (){
      // save original style. if no style was set, attr() returns undefined
      var $this   = $( this );
      var thisstyle = $this.attr( 'style' );
      tmp.push( thisstyle );
      // retain as much of the original style as possible, if there is one
      $this.attr( 'style', thisstyle ? thisstyle + ';' + 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;
  }
 });
}));

代码实例：

//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});

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！