JavaScript之DOM元素尺寸与位置

一、获取元素CSS大小

1、通过style内联获取元素的大小

style只能获取行内的CSS样式的宽和高，没有则返回空。

<div id='box' style='background:red;width:200px;height:200px'></div>


window.onload = function(){
	var box = document.getElementById('box');
	alert(box.style.width);
	alert(box.style.height);
	alert(typeof box.style.width);//string
	alert(typeof box.style.height);//string
}

2、通过计算获取元素的大小

通过计算获取元素的大小，无关你是行内、内联、还是链接，它经过计算后得到结果返回出来。如果本身有设置大小，就返回元素大小，如果本身没有设置，非IE浏览器会返回默认的大小，IE浏览器返回auto。

var style = window.getComputedStyle?window.getComputedStyle(box,null):null||box.currentStyle;
	alert(style.width);
	alert(style.height);

3、通过CSSStyleSheet对象中的cssRules属性获取元素的大小

cssRules只能获取到 内联和链接样式的宽高，不能获取行内和计算后的样式。

var sheet = document.styleSheets[0];//获取link或style
	var rules = (sheet.cssRules||sheet.rules)[0];//获取第一条规则
	alert(rules.style.width);
	alert(rules.style.height);

以上的三种CSS获取元素的大小的方法，只能获取元素的CSS大小，却无法获取元素本身的实际大小。比如加上内边距、滚动条、边框。。。

二、获取元素实际大小

1、clientWidth和clientHeight

这组属性可以获取元素的可视区的大小，可以得到元素内容及内边距所占据的空间大小。

box.clientWidth;//200
box.clientHeight; //200

它返回的元素大小，没有单位，默认单位px，如果你强行设置了单位，它还是返回转化成px的大小。

增加边框：无变化。

增加外边框：无变化。

增加滚动条：最终值等于原本大小减去滚动条的大小。

增加内边距：最终值等于原本大小加上内边距的大小。

2、scrollWidth和scrollHeight

这组属性可以获取滚动内容的元素大小

box.scrollWidth;
box.scrollHeight;

增加边框，不同浏览器有不同的解释：

a、Firefox和Opera浏览器会增加边框大小；

b、Chrome、Safair浏览器会忽略边框大小；

c、IE浏览器只显示它本来内容的高度；

增加内边距：最终值会等于原本大小加上内边距大小；

增加滚动条：最终值会等于原本大小减去滚动条大小；

3、offsetWidth和offsetHeight

这组属性可以返回元素实际大小，包括边框、内边距、滚动条。

增加边框：最终值会等于原本大小加上边框大小；

增加内边距：最终值会等于原本大小加上内边距大小；

增加外边距：无变化；

增加滚动条：无变化；

三、获取元素周边大小

1、clientLeft和clientTop这组属性可以获取元素设置了左边框和上边框大小。

box.clientLeft;

box,clientTop;

目前提供了Left和Top这组，没有right和Bottom。如果四条边框不同的话，可以直接通过计算后的样式获取，或采取以上三组获取元素大小的减法求得。

2、offsetLeft和offsetTop这组属性可以获取当前元素相对于父元素位置。

box.offsetLeft;

box.offsetTop;

获取元素当前相对父元素的位置，最好将他设置为定位position:absolute;否则不同浏览器会有不同解释。

加上边框和内边距不会影响它的位置，但加上外边距会累加。

box.offsetParent.   //得到父元素

box.offsetTop+box.offsetParent.offsetTop; //只有两层的情况下

如果 有多层，就使用循环

function offsetLeft(element){
	var left = element.offsetLeft;
	var parent = element.offsetParent;

	while(parent != null){
		left += parent.offsetLeft;
		parent = parent.offsetParent;
	}

	return left;
}

3、scrollTop和scrollLeft这组属性可以获取滚动条被隐藏的区域大小，也可设置定位到该区域。

box.scrollTop; //获取滚动条上方位置

box.scrollLeft; //获取滚动条左方位置

如果要让滚动条滚到最初始位置，那么可以写个函数

function scrollStart(element){
       if (element.scrollTop != 0) element.scrollTop = 0;
}