DDR爱好者之家 Design By 杰米
在实际开发中会遇到确实需要获取隐藏元素的宽高,这儿所说的隐藏元素是display为none的元素。
可使用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 "htmlcode">;( 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 "htmlcode">//get hidden element actual width $('.hidden').actual('width'); //get hidden element actual innerWidth $('.hidden').actual('innerWidth'); //get hidden element actual outerWidth $('.hidden').actual('outerWidth'); //get hidden element actual outerWidth and set the `includeMargin` argument $('.hidden').actual('outerWidth',{includeMargin:true}); //get hidden element actual height $('.hidden').actual('height'); //get hidden element actual innerHeight $('.hidden').actual('innerHeight'); //get hidden element actual outerHeight $('.hidden').actual('outerHeight'); // get hidden element actual outerHeight and set the `includeMargin` argument $('.hidden').actual('outerHeight',{includeMargin:true}); //if the page jumps or blinks, pass a attribute '{ absolute : true }' //be very careful, you might get a wrong result depends on how you makrup your html and css $('.hidden').actual('height',{absolute:true}); // if you use css3pie with a float element // for example a rounded corner navigation menu you can also try to pass a attribute '{ clone : true }' // please see demo/css3pie in action $('.hidden').actual('width',{clone:true});以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年11月27日
2024年11月27日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]