在实际开发中会遇到确实需要获取隐藏元素的宽高,这儿所说的隐藏元素是display为none的元素。
可使用jQuery Actual Plugin插件来完成,其源码如下:
;( function ( $ ){ $.fn.addBack = $.fn.addBack || $.fn.andSelf; $.fn.extend({ actual : ( 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 : 'block' }; var configs = $.extend( defaults,options ); var $target = this.eq( 0 ); var fix,restore; if( configs.clone === true ){ fix = (){ var style = 'position: absolute !important; top: -1000 !important; '; this is useful with css3pie $target = $target. clone(). attr( 'style' ); }; restore = remove DOM element after getting the width $target.remove(); }; }else{ var tmp = []; var style = ''; $hidden; fix = 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( (){ Save original style. If no style was set,attr() returns undefined var $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 = restore origin style values $hidden.each( ( i ){ this = $( var _tmp = tmp[ i ]; if( _tmp === undefined ){ $this.removeAttr( 'style' ); }{ $ 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);
当然如果要支持模块化开发,直接使用官网下载的文件即可,源码也贴上:
;( ( factory ) { if ( typeof define === 'function' && define.amd ) { AMD. Register module depending on jQuery using requirejs define. define( ['jquery'],factory ); } { No AMD. factory( jQuery ); } }( 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:}); 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',1)">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: 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});