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

获取元素尺寸和位置的两个冷门方法
作者：Neoxone 发表时间： 2012年01月4号，星期三阅读：3,493 次

获取元素的尺寸，似乎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这些值就行了，不做赘述。