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

前端技术 2023/09/03 JavaScript

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>

本文地址：https://www.stayed.cn/item/6973

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案