javascript获取隐藏元素(display:none)的高度和宽度的方法(转)

来源：互联网发布：初入职场知乎编辑：程序博客网时间：2024/05/16 09:17

类型：转载时间：2014-06-06

这篇文章主要介绍了javascript获取隐藏元素(display:none)的高度和宽度的方法,实现方法比较复杂,需要的朋友可以参考下

js获取可见元素的尺寸还是比较方便的，这个可以直接使用这个方法：

代码如下:

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属性设回原来的样式。

这就是js获取隐藏元素的尺寸基本实现方式，大家有兴趣可以看看《精通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>

题外话：一般js的框架，库都已经封装了这个方法，比如jQ，我们可以直接使用 height()和width()方法获取隐藏元素的尺寸。

转：http://www.jb51.net/article/50758.htm

0 0