在實際開發中會遇到確實需要取得隱藏元素的寬高,這兒所說的隱藏元素是display為none的元素。本文主要介紹了無法取得隱藏元素(display:none)寬度(width)和高度(height)的解決方案,具有很好的參考價值。下面跟著小編一起來看吧,希望能幫助大家。
可使用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; } }); }));
程式碼實例:
以上是無法取得隱藏元素寬度和高度如何解決的詳細內容。更多資訊請關注PHP中文網其他相關文章!