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

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

在实际开发中会遇到确实需要获取隐藏元素的宽高，这儿所说的隐藏元素是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;

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

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。