javascript获取隐藏元素(display:none)的高度和宽度的方法
js获取可见元素的尺寸还是比较方便的，这个可以直接使用这个方法：
functiongetDefaultStyle(obj,attribute){//返回最终样式函数，兼容IE和DOM，设置参数：元素对象、样式特性
returnobj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];
}
但是如果这个元素是隐藏(display:none)的，尺寸又是未知自适应的，哪有上面的方法就不行了！因为display:none的元素是没有物理尺寸的！悲剧就这样发生了！
幸好css中还有visibility:hidden，不可见属性，他和display:none最大的区别就是visibility:hidden有物理尺寸。有物理尺寸就可以通过上面的方法获取尺寸，但是将display:none改成visibility:hidden后页面就有一块空白在那里，即使在你获取尺寸后在马上将visibility:hidden改成display:none页面那部分还是会抖动一下。那么最好的办法就是将这个隐藏的元素移出屏幕或者脱离文档流（position:absolute）。这样似乎非常完美了，但是悲剧又发生了，如果你要再显示这个元素的时侯这个元素是不可见的，位置也不对，因为这是这个元素visibility:hidden;position:absolute。所以在获取尺寸后还要将样式还原回去。就是将position和visibility属性设回原来的样式。
这就是js获取隐藏元素的尺寸基本实现方式，大家有兴趣可以看看《精通javascript》这本书上的方法。
我这里也做了个简单的demo，大家可以看看源代码:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>js获取隐藏元素的尺寸</title> <styletype="text/css"> </style> <scripttype="text/javascript"src="http://www.css88.com/tool/css3Preview/jquery-1.4.2.min.js"></script> </head>
<body> <divid="test_display_block"style="display:none;border:10pxsolid#CDCDCD;margin-left:100px">这是test容器，可见容器<br/>这是test容器，可见容器<br/>这是test容器，可见容器<br/>这是test容器，可见容器<br/>这是test容器，<br/>这是test容器，<br/>这是test容器，<br/>这是test容器，<br/>这是test容器，<br/></div> <divid="test_display_none"style="display:none;border:10pxsolid#CDCDCD">这是test容器，这是test容器，<br/>这是test容器，<br/>这是test容器，<br/>这是test容器，<br/>这是test容器，<br/>这是test容器，<br/></div> <divid="test_display_click">点我</div> <scripttype="text/javascript"> //判断对象类型 functiongetType(o){ var_t; return((_t=typeof(o))=="object"?o==null&&"null"||Object.prototype.toString.call(o).slice(8,-1):_t).toLowerCase(); } //获取元素样式 functiongetStyle(el,styleName){ returnel.style[styleName]?el.style[styleName]:el.currentStyle?el.currentStyle[styleName]:window.getComputedStyle(el,null)[styleName]; } functiongetStyleNum(el,styleName){ returnparseInt(getStyle(el,styleName).replace(/px|pt|em/ig,'')); } functionsetStyle(el,obj){ if(getType(obj)=="object"){ for(sinobj){ varcssArrt=s.split("-"); for(vari=1;i<cssArrt.length;i++){ cssArrt[i]=cssArrt[i].replace(cssArrt[i].charAt(0),cssArrt[i].charAt(0).toUpperCase()); } varcssArrtnew=cssArrt.join(""); el.style[cssArrtnew]=obj[s]; } } else if(getType(obj)=="string"){ el.style.cssText=obj; } } functiongetSize(el){ if(getStyle(el,"display")!="none"){ return{width:el.offsetWidth||getStyleNum(el,"width"),height:el.offsetHeight||getStyleNum(el,"height")}; } var_addCss={display:"",position:"absolute",visibility:'hidden'}; var_oldCss={}; for(iin_addCss){ _oldCss[i]=getStyle(el,i); } setStyle(el,_addCss); var_width=el.clientWidth||getStyleNum(el,"width"); var_height=el.clientHeight||getStyleNum(el,"height"); for(iin_oldCss){ setStyle(el,_oldCss); } return{width:_width,height:_height}; } vardd=document.getElementById("test_display_block"); alert(getSize(dd).height); document.getElementById("test_display_click").onclick=function(){ dd.style.display="block"; document.getElementById("test_display_none").style.display="block"; } alert($("#test_display_none").height()); </script> </body> </html>