无法获取隐藏元素宽度和高度的解决方案
在实际开发中会遇到确实需要获取隐藏元素的宽高,这儿所说的隐藏元素是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});
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持毛票票!