在做茶城網(wǎng)改版工作的時(shí)候，又遇到一個(gè)新問題，我需要用jQuery寫一個(gè)通過點(diǎn)擊左右圖標(biāo)來翻閱圖片的小插件，寫好后測(cè)試可以正常運(yùn)行，但是放到Tab中后發(fā)現(xiàn)只有第一個(gè)Tab中的代碼能夠正常運(yùn)行，其它全部罷工了。

用Chrome自帶的開發(fā)工具一查，發(fā)現(xiàn)罷工的Tab中。小插件一些重要元素的寬度都變成“0”了，因?yàn)檫@個(gè)小插件需要計(jì)算動(dòng)態(tài)寬度來實(shí)現(xiàn)，于是馬上想到是小插件中的寬度獲取失敗了，果不其然。 汗，居然一直沒發(fā)現(xiàn)jQuery無法獲取隱藏元素（display:none）的寬度(width)和高度(height)，為了兼容IE6，我用1.x版，而且是官方最新的1.10.2版，不知道在2.x版中這個(gè)問題有沒有解決。 既然jQuery都不支持，那么Javascript也就肯定不支持了，網(wǎng)上搜索了一下，有個(gè)解決方案是用visibility:hidden來代替display:none，由于visibility:hidden占用物理空間，因此可以獲取寬高。 問題是這需要我去改動(dòng)已經(jīng)寫好的Tab插件，這種拆東墻補(bǔ)西墻的事情，總會(huì)讓人感覺不爽的。長時(shí)間搜索其它解決方案無果，就在我快要妥協(xié)的時(shí)候，突然眼前一亮，發(fā)現(xiàn)了個(gè)好東西：jQuery Actual 可以說它幾乎完美的解決了這個(gè)問題，而且使用方法極其簡單，使用$('#someElement').actual('width')的方式來代替$('#someElement').width()就可以了，兼容性也十分出色，可以兼容IE6瀏覽器，壓縮后體積只有1.1K也是一大亮點(diǎn)，更牛的是還支持inner和outer的計(jì)算。

?

官方信息

• jQuery Actual?官網(wǎng)
• jQuery Actual?演示
• jQuery Actual?文檔
• jQuery Actual?下載

jQuery版本要求

• jQuery 1.2.3+

所兼容的瀏覽器

• Firefox 2.0+
• Internet Explorer 6+
• Safari 3+
• Opera 10.6+
• Chrome 8+

安裝方法

• HTML文檔需要聲明DOCTYPE
• 引用JS文件即可 <script type="text/javascript" src="path/jquery.min.js"></script> <script type="text/javascript" src="path/jquery.actual.js"></script>

使用方法

• 代碼范例
• //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});

  個(gè)人覺得jQuery官方應(yīng)該考慮將這個(gè)功能寫進(jìn)內(nèi)核，那就更方便了。為了防止以后jQuery Actual的官網(wǎng)打不開（現(xiàn)在就時(shí)不時(shí)會(huì)和諧）或者下載不了，在這里存一份jquery.actual.js的源碼，以備不時(shí)只需。

• 源碼：jquery.actual.js

  ;( function ( $ ){$.fn.addBack = $.fn.addBack || $.fn.andSelf;$.fn.extend({actual : function ( method, options ){// check if the jQuery method existif( !this[ method ]){throw '$.actual => The jQuery method "' + method + '" you called does not exist';}var defaults = {absolute : false,clone : false,includeMargin : false};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: block !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 (){var $this = $( this );// Save original style. If no style was set, attr() returns undefinedtmp.push( $this.attr( 'style' ));$this.attr( '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 elementreturn actual;}}); })( jQuery );

  ?此上是轉(zhuǎn)載別人的文章。

• 此外我還發(fā)現(xiàn)，如果覺得上述方法未曾聽過或者不知道，但是要知道原因，為什么會(huì)取不到高度，這是今天一直困擾我的問題。因?yàn)槲以讷@取高度之前，對(duì)前面的元素添加了隱藏的動(dòng)作，我用的是hide()，但是在頁面的標(biāo)簽上就會(huì)形成display:none;這個(gè)動(dòng)作，所以之后我再取值就得不到了。讀了上述之后，瞬間明白。jQuery無法獲取隱藏元素（display:none）的寬度(width)和高度(height)，解決方案是用visibility:hidden來代替display:none，由于visibility:hidden占用物理空間，因此可以獲取寬高。

轉(zhuǎn)載于:https://www.cnblogs.com/catherineSue/p/6123272.html

總結(jié)

以上是生活随笔為你收集整理的[jQuery]无法获取隐藏元素（display:none）宽度(width)和高度(height)的新解决方案的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。