JavaScript 获取 display:none 隐藏元素尺寸的方法

获取隐藏元素尺寸的挑战

在 JavaScript 中获取可见元素的尺寸通常比较直接，可以直接调用相关方法实现。

function getDefaultStyle(obj,attribute){ // 返回最终样式函数，兼容IE和DOM，设置参数：元素对象、样式特性
return obj.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 属性恢复为原始状态。

这就是 JavaScript 获取隐藏元素尺寸的基本实现方式，有兴趣的读者可以参考《精通javascript》一书中的相关方法。

代码示例与框架封装

这里提供了一个简单的 demo，大家可以查看源代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js获取隐藏元素的尺寸</title>
<style type="text/css">
</style>
<script type="text/javascript" src="http://www.css88.com/tool/css3Preview/jquery-1.4.2.min.js"></script>
</head>
<body>
 <div id="test_display_block" style="display:none; border:10px solid #CDCDCD; margin-left: 100px">这是test容器，可见容器<br />这是test容器，可见容器<br />这是test容器，可见容器<br />这是test容器，可见容器<br />这是test容器，<br />这是test容器，<br />这是test容器，<br />这是test容器，<br />这是test容器，<br /></div>
 <div id="test_display_none" style="display:none; border:10px solid #CDCDCD">这是test容器，这是test容器，<br />这是test容器，<br />这是test容器，<br />这是test容器，<br />这是test容器，<br />这是test容器，<br /></div>
 <div id="test_display_click">点我</div>
 <script type="text/javascript">
 //判断对象类型
 function getType(o){
 var _t;
 return ((_t = typeof(o)) == "object" ? o==null && "null" || Object.prototype.toString.call(o).slice(8,-1):_t).toLowerCase();
 }
 //获取元素样式
 function getStyle(el, styleName) {
 return el.style[styleName] ? el.style[styleName] : el.currentStyle ? el.currentStyle[styleName] : window.getComputedStyle(el, null)[styleName];
 }
 function getStyleNum(el, styleName) {
 return parseInt(getStyle(el, styleName).replace(/px|pt|em/ig,''));
 }
 function setStyle(el, obj){
 if (getType(obj) == "object") {
 for (s in obj) {
 var cssArrt = s.split("-");
 for (var i = 1; i < cssArrt.length; i++) {
 cssArrt[i] = cssArrt[i].replace(cssArrt[i].charAt(0), cssArrt[i].charAt(0).toUpperCase());
 }
 var cssArrtnew = cssArrt.join("");
 el.style[cssArrtnew] = obj[s];
 }
 }
 else 
 if (getType(obj) == "string") {
 el.style.cssText = obj;
 }
 }
 function getSize(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 (i in _addCss) {
 _oldCss[i] = getStyle(el, i);
 }
 setStyle(el, _addCss);
 var _width = el.clientWidth || getStyleNum(el, "width");
 var _height = el.clientHeight || getStyleNum(el, "height");
 for (i in _oldCss) {
 setStyle(el, _oldCss);
 }
 return { width: _width, height: _height };
 } 
var dd=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>

补充说明：大多数 JavaScript 框架或库（如 jQuery）已经封装了获取隐藏元素尺寸的方法，例如可以直接使用 height() 和 width() 方法获取隐藏元素的尺寸。