Of Stack

Javascript gets the method to hide the height and width of the element of display:none

  • 2020-03-30 03:12:27
  • OfStack

Js to obtain the size of visible elements is still more convenient, which can be directly used in this method: 


function getDefaultStyle(obj,attribute){ //Returns the final style function, compatible with IE and DOM, and sets the parameters: element object, style properties
 return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];
}


But if the element is hidden (display:none), and the size is unknown and adaptive, the above method won't work! Because the element of display:none has no physical size! And so it happened!

Luckily, there is also a property called visibility:hidden in CSS. The major difference between it and display:none is that the visibility:hidden has a physical size. If you have a physical size, you can get the size from the above method, but if you change display:none to visibility:hidden, there will be a blank on the page. Even if you change the visibility:hidden to display:none page immediately after you get the size, the page will still shake a little. The best thing to do is to remove the hidden element from the screen or from the document stream. This seems to be perfect, but the tragedy is that if you want to display the element again, the element is invisible and in the wrong position, because this is the element visibility:hidden; Position: absolute. So you have to restore the style after you get the size. That is, the position and visibility properties are set back to their original style.

This is how js basically gets the size of a hidden element, and if you're interested, you can look at the method in the book javascript mastery.

I also made a simple demo here, you can look at the source code: 


<!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 Gets the size of the hidden element </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"> This is a test Containers, visible containers <br /> This is a test Containers, visible containers <br /> This is a test Containers, visible containers <br /> This is a test Containers, visible containers <br /> This is a test The container, <br /> This is a test The container, <br /> This is a test The container, <br /> This is a test The container, <br /> This is a test The container, <br /></div>
 <div id="test_display_none" style="display:none; border:10px solid #CDCDCD"> This is a test The container, this is test The container, <br /> This is a test The container, <br /> This is a test The container, <br /> This is a test The container, <br /> This is a test The container, <br /> This is a test The container, <br /></div>
        <div id="test_display_click"> Am I </div>
        <script type="text/javascript">
            //Determine object type
 function getType(o){
            var _t;
            return ((_t = typeof(o)) == "object" ? o==null && "null" || Object.prototype.toString.call(o).slice(8,-1):_t).toLowerCase();
        }
        //Get the element style
 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>

As an aside: most js frameworks and libraries already encapsulate this method, such as jQ, we can directly use the height() and width() methods to get the size of the hidden element.

Related articles: