无法获取隐藏元素宽度和高度的解决方案
在实际开发中会遇到确实需要获取隐藏元素的宽高，这儿所说的隐藏元素是display为none的元素。
可使用jQueryActualPlugin插件来完成，其源码如下：
;(function($){
$.fn.addBack=$.fn.addBack||$.fn.andSelf;
$.fn.extend({
actual:function(method,options){
//checkifthejQuerymethodexist
if(!this[method]){
throw'$.actual=>ThejQuerymethod"'+method+'"youcalleddoesnotexist';
}
vardefaults={
absolute:false,
clone:false,
includeMargin:false,
display:'block'
};
varconfigs=$.extend(defaults,options);
var$target=this.eq(0);
varfix,restore;
if(configs.clone===true){
fix=function(){
varstyle='position:absolute!important;top:-1000!important;';
//thisisusefulwithcss3pie
$target=$target.
clone().
attr('style',style).
appendTo('body');
};
restore=function(){
//removeDOMelementaftergettingthewidth
$target.remove();
};
}else{
vartmp=[];
varstyle='';
var$hidden;
fix=function(){
//getallhiddenparents
$hidden=$target.parents().addBack().filter(':hidden');
style+='visibility:hidden!important;display:'+configs.display+'!important;';
if(configs.absolute===true)style+='position:absolute!important;';
//savetheoriginstyleprops
//setthehiddenelcsstobegottheactualvaluelater
$hidden.each(function(){
//Saveoriginalstyle.Ifnostylewasset,attr()returnsundefined
var$this=$(this);
varthisStyle=$this.attr('style');
tmp.push(thisStyle);
//Retainasmuchoftheoriginalstyleaspossible,ifthereisone
$this.attr('style',thisStyle?thisStyle+';'+style:style);
});
};
restore=function(){
//restoreoriginstylevalues
$hidden.each(function(i){
var$this=$(this);
var_tmp=tmp[i];
if(_tmp===undefined){
$this.removeAttr('style');
}else{
$this.attr('style',_tmp);
}
});
};
}
fix();
//gettheactualvaluewithuserspecificmethed
//itcanbe'width','height','outerWidth','innerWidth'...etc
//configs.includeMarginonlyworksfor'outerWidth'and'outerHeight'
varactual=/(outer)/.test(method)?
$target[method](configs.includeMargin):
$target[method]();
restore();
//IMPORTANT,thispluginonlyreturnthevalueofthefirstelement
returnactual;
}
});
})(jQuery);
当然如果要支持模块化开发，直接使用官网下载的文件即可，源码也贴上：
;(function(factory){
if(typeofdefine==='function'&&define.amd){
//AMD.RegistermoduledependingonjQueryusingrequirejsdefine.
define(['jquery'],factory);
}else{
//NoAMD.
factory(jQuery);
}
}(function($){
$.fn.addBack=$.fn.addBack||$.fn.andSelf;
$.fn.extend({
actual:function(method,options){
//checkifthejQuerymethodexist
if(!this[method]){
throw'$.actual=>ThejQuerymethod"'+method+'"youcalleddoesnotexist';
}
vardefaults={
absolute:false,
clone:false,
includeMargin:false,
display:'block'
};
varconfigs=$.extend(defaults,options);
var$target=this.eq(0);
varfix,restore;
if(configs.clone===true){
fix=function(){
varstyle='position:absolute!important;top:-1000!important;';
//thisisusefulwithcss3pie
$target=$target.
clone().
attr('style',style).
appendTo('body');
};
restore=function(){
//removeDOMelementaftergettingthewidth
$target.remove();
};
}else{
vartmp=[];
varstyle='';
var$hidden;
fix=function(){
//getallhiddenparents
$hidden=$target.parents().addBack().filter(':hidden');
style+='visibility:hidden!important;display:'+configs.display+'!important;';
if(configs.absolute===true)style+='position:absolute!important;';
//savetheoriginstyleprops
//setthehiddenelcsstobegottheactualvaluelater
$hidden.each(function(){
//Saveoriginalstyle.Ifnostylewasset,attr()returnsundefined
var$this=$(this);
varthisStyle=$this.attr('style');
tmp.push(thisStyle);
//Retainasmuchoftheoriginalstyleaspossible,ifthereisone
$this.attr('style',thisStyle?thisStyle+';'+style:style);
});
};
restore=function(){
//restoreoriginstylevalues
$hidden.each(function(i){
var$this=$(this);
var_tmp=tmp[i];
if(_tmp===undefined){
$this.removeAttr('style');
}else{
$this.attr('style',_tmp);
}
});
};
}
fix();
//gettheactualvaluewithuserspecificmethed
//itcanbe'width','height','outerWidth','innerWidth'...etc
//configs.includeMarginonlyworksfor'outerWidth'and'outerHeight'
varactual=/(outer)/.test(method)?
$target[method](configs.includeMargin):
$target[method]();
restore();
//IMPORTANT,thispluginonlyreturnthevalueofthefirstelement
returnactual;
}
});
}));
代码实例：
//gethiddenelementactualwidth
$('.hidden').actual('width');
//gethiddenelementactualinnerWidth
$('.hidden').actual('innerWidth');
//gethiddenelementactualouterWidth
$('.hidden').actual('outerWidth');
//gethiddenelementactualouterWidthandsetthe`includeMargin`argument
$('.hidden').actual('outerWidth',{includeMargin:true});
//gethiddenelementactualheight
$('.hidden').actual('height');
//gethiddenelementactualinnerHeight
$('.hidden').actual('innerHeight');
//gethiddenelementactualouterHeight
$('.hidden').actual('outerHeight');
//gethiddenelementactualouterHeightandsetthe`includeMargin`argument
$('.hidden').actual('outerHeight',{includeMargin:true});
//ifthepagejumpsorblinks,passaattribute'{absolute:true}'
//beverycareful,youmightgetawrongresultdependsonhowyoumakrupyourhtmlandcss
$('.hidden').actual('height',{absolute:true});
//ifyouusecss3piewithafloatelement
//forexamplearoundedcornernavigationmenuyoucanalsotrytopassaattribute'{clone:true}'
//pleaseseedemo/css3pieinaction
$('.hidden').actual('width',{clone:true});
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！