如何获取元素的尺寸和位置——两个冷门方法

#DOM 2012-01-04

获取元素的尺寸，似乎offsetWidth/Height就可以了，还需要什么方法吗？
的确，一般情况下，获取元素尺寸，用offsetWidth/Height就搞定了，但如果这个元素是display:none的呢？
试验一下就知道，none元素的尺寸是0。

所以需要我们下面的这个方法来获取。

<!doctype html> <html> <head> <meta charset="utf-8" /> <title>获取display:none元素的size</title> <style> body{color:#ccc;} </style> </head> <body> <div id="box" style="width:100px;height:100px;padding:20px;border:10px solid #ccc;display:none;">asdd</div> </body> <script type="text/javascript"> function $id(o){ return document.getElementById(o); } var getSize = function(elem){ if(elem.offsetWidth !== 0){ /* 元素不是display:none的情况，这个时候是能得到尺寸的 */ return {'width':elem.offsetWidth, 'height':elem.offsetHeight }; } var old = {}; /* 将display:none元素设成visibility:hidden */ var options = { position: "absolute", visibility: "hidden", display:"block" } for ( var name in options ) { old[ name ] = elem.style[ name ]; elem.style[ name ] = options[ name ]; } var temp = {'width':elem.offsetWidth, 'height':elem.offsetHeight}; for ( var name in options ) { elem.style[ name ] = old[ name ]; } return temp; }; alert(getSize($id("box")).height) </script> </html>

第二个，获取元素的位置。
或许你经常使用offsetLeft/Top来获取位置，不过offsetLeft/Top是相对 offsetParent的位置（在ie6，7下是相对直接父级的),并且在firefox下还有些小bug

下面这个方法提供获取元素相对于窗口（页面可视区）的距离。

<!doctype html> <html> <head> <meta charset="utf-8" /> <title>元素相对窗口左上角的值（ie下没有width，height值）</title> <style> *{padding:0;margin:0;} #box{position:absolute;left:200px;width:100px;height:200px;border:5px solid #ccc;background:#eee;} </style> </head> <body> <div id="box"></div> </body> <script type="text/javascript"> var box = document.getElementById("box"); var pos = box.getBoundingClientRect(); box.innerHTML = "top:"+pos.top + "<br />left:"+pos.left + "<br />bottom:"+pos.bottom + "<br />right:"+pos.right + "<br />width:"+pos.width + "<br />height:"+pos.height </script> </html>

这个方法是由ie提出的，不过在其他浏览器吸收之后，还加了width，height两个值。

重复一下，这个方法是相对于页面窗口的，至于相对于整个页面文档的距离，那只需加上scrollTop这些值就行了，不做赘述。