It is quite convenient to get the size of visible elements by js. You can use this method directly:
The code copy is as follows:
function getDefaultStyle(obj,attribute){ // Returns the final style function, compatible with IE and DOM, sets parameters: element object, style characteristics
return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];
}
But if this element is hidden (display:none) and its size is unknown adaptable, then the above method will not work! Because the display:none element has no physical size! The tragedy happened like this!
Fortunately, there is also visibility:hidden in css, which is invisible. The biggest difference between it and display:none is that visibility:hidden has a physical size. If you have physical sizes, you can get the size by the above method, but after changing display:none to visibility:hidden, there will be a blank space on the page. Even if you change visibility:hidden to display:none immediately after you get the size, the part of the page will still shake. Then the best way is to move this hidden element out of the screen or out of the document stream (position: absolute). This seems perfect, but the tragedy happens again. If you want to display this element again, the element is invisible and the position is not right, because this is the element's visibility:hidden;position: absolute. So after obtaining the size, you must restore the style back. It is to set the position and visibility attributes back to the original style.
This is the basic implementation of js to obtain the size of hidden elements. If you are interested, you can take a look at the method in the book "Proficient in JavaScript".
I have also made a simple demo here, you can check the source code:
The code copy is as follows:
<!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 the test container, the visible container<br />This is the test container, the visible container<br />This is the test container, the visible container<br />This is the test container, the visible container<br />This is the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the test container, the
<div id="test_display_none" style="display:none; border:10px solid #CDCDCD">This is the test container, this is the test container,<br />This is the test container,<br />This is the test container,<br />This is the test container,<br />This is the test container,<br /></div>
<div id="test_display_click">Click me</div>
<script type="text/javascript">
//Judge 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 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 cssArrrt = s.split("-");
for (var i = 1; i < cssArrrt.length; i++) {
cssArrrt[i] = cssArrrt[i].replace(cssArrrt[i].charAt(0), cssArrrt[i].charAt(0).toUpperCase());
}
var cssArrtnew = cssArrrt.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>
Off topic: Generally, the JavaScript framework and libraries have encapsulated this method. For example, jQ, we can directly use the height() and width() methods to get the size of the hidden elements.