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

前端之家收集整理的这篇文章主要介绍了无法获取隐藏元素宽度和高度的解决方案前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

可使用jQuery Actual Plugin插件来完成,其源码如下:

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 :
$target[ method ]();
restore();
// IMPORTANT,this plugin only return the value of the first element
return actual;
}
});
})(jQuery);

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

代码实例:

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

原文链接:https://www.f2er.com/js/41009.html

猜你在找的JavaScript相关文章