Home > Developer > JavaScript
JS to get the size of the visible elements is still more convenient, this can be directly used this method:
Fortunately, there are visibility:hidden css, invisible attributes, he and display:none the biggest difference is that Visibility:hidden have physical dimensions. There is a physical size can be obtained by the above method to obtain the size, but the Display:none to Visibility:hidden after the page has a blank in there, even after you get the size of the Visibility:hidden in the immediate change to display: The None page still shakes a little bit. The best way to do this is to move the hidden element out of the screen or out of the document Stream (Position:absolute). It seemed perfect, but the tragedy happened again, and if you were to show this element again this element is not visible and the position is not right, because this is the element Visibility:hidden;position:absolute. So after you get the size, you have to restore the style back. is to set the position and visibility properties back to their original style.
This is JS to get the hidden elements of the size of the basic implementation, we are interested to see the "proficient in JavaScript," The method of the book.
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 ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>js get the dimensions of the hidden elements </title>
<style type= "Text/css" >
</style>
<script type= "Text/javascript" src= "Http://www.css88.com/tool/css3Preview/jquery-1.4.2.min.js" ></script >
<body>
<div id= "Test_display_block" style= "display:none; border:10px solid #CDCDCD; margin-left:100px "> This is the Test container, visible container <br/> This is the test container, visible container <br/> This is the test container, visible container <br/> This is the test container, visible 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/> This is the test container, <BR/ ></div>
<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 Test Container, <br/> This is Test Container, <br/></div>
<div id= "Test_display_click" > Dot i </div>
<script type= "Text/javascript" >
Determining Object Types
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 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>
Digression: The General JS Framework, the library has encapsulated this method, such as JQ, we can directly use the height () and Width () method to get the size of hidden elements.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
