javascript獲取隱藏元素(display:none)的高度和寬度的方法

2019-11-20 14:45:56

字體：大中小

來源：轉載

供稿：網友

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>