使用display:none时隐藏DOM元素无法获取实际宽高的解决方法(display属性应用)燃爆了

随心笔谈2年前发布 编辑
161 0
🌐 经济型:买域名、轻量云服务器、用途:游戏 网站等 《腾讯云》特点:特价机便宜 适合初学者用 点我优惠购买
🚀 拓展型:买域名、轻量云服务器、用途:游戏 网站等 《阿里云》特点:中档服务器便宜 域名备案事多 点我优惠购买
🛡️ 稳定型:买域名、轻量云服务器、用途:游戏 网站等 《西部数码》 特点:比上两家略贵但是稳定性超好事也少 点我优惠购买

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

© 版权声明

相关文章