js中元素大小操作

1 偏移量

元素的偏移量包括元素在屏幕上占据的所有可见空间。元素的可见大小有其高度、宽度决定，包括所有内边距、滚动条和边框大小（不包括外边距）。通过下列四个属性可取得元素的偏移量

offsetHeight:元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、（可见的）水平滚动条的高度、上边框高度和下边框高度。其结果是一个数值 不包括单位

offseWidth：元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、（可见的）垂直滚动条的高度、左边框高度和右边框高度。其结果是一个数值 不包括单位

offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离（该元素的margin-left和父元素的padding-left）

offsetTop:元素的上外边框至包含元素的上内边框之间的像素距离

其中，offsetLeft和offsetTop属性与包含元素有关，包含元素的引用保存在offsetParent属性中。offsetParent是上一级的定位元素

要想知道某个元素在页面上的偏移量，将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加，如此循环直至根元素，就可以得到基本准确的值

//求某个元素在页面上的偏移量
function getElementLeft(ele){
	var actualLeft=ele.offsetLeft;
	var current=ele.offsetParent;
	while(current!==null){
		actualLeft+=current.offsetLeft;
		current=current.offsetParent;
	}
	return actualLeft;
}

2 客户区大小元素的客户区大小指的是元素内容及其内边距所占据的空间大小。有关客户区大小的属性有两个：clientWidth和clientHeight。其中，clientWidth属性是元素内容区域宽度加上左右内边距宽度；clientHeight属性是元素内容区域高度加上内边距的高度（客户区大小就是元素内部的空间大小，滚动条占用的空间不计算在内）。要确定浏览器视口的大小，可以使用document.documentElement或docuemnt.body的clientWidth和clientHeight

//浏览器视口大小
function getViewport(){
	//混杂模式下客户区大小的求解
	if(document.compatMode=="BackCompat"){
		return {
			CWidth:document.body.clientWidth,
			Cheight:document.body.clientHeight
		}
	}else{
		return {
			CWidth:document.documentElement.clientWidth,
			CHeight:document.documentElement.clientHeight
		}
	}
}

3 滚动大小

滚动大小指的是包含滚动内容的元素的大小。以下是4个与滚动大小相关的属性

scrollHeiht：在没有滚动条的情况下，元素内容的总宽度（一般等于元素的height属性的高度值 ie7为元素的offsetHeight值（height+border）

scrollWidth: 在没有滚动条的情况下，元素内容的总宽度

scrollLeft：被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素滚动的位置。

scrollTop:被隐藏在内容区域上方的像素值。通过设置这个属性可以改变元素的滚动位置

对于不包含滚动条的页面而言，scrollWidth和scrollHeight与clientWidth和clientHeight之间的关系并不清晰。所以为了确定文档的总高度，必须取得scrollWidth/crollWidth和scrollHeight/clientHeight中的最大值，才能保证在跨浏览器的环境下得到精确的结果

var docHeight=Math.max(document.documentElement.clientHeight,document.documentElement.scrollHeight);

4 确定元素大小

浏览器为每个元素提供了getBoundingClientRect()方法。这个方法返回一个矩形对象，包含4个属性：left、top、right和bottom。这些属性给出了元素相对于视口的位置。但是浏览器的实现稍有不同。IE及更早版本认为文档左上角的坐标是（2,2），而其他浏览器则将传统的（0,0）作为起点坐标。定义一个函数 对起点坐标进行调整

function getBoundingClientRectA(ele){
	var scrollTop=document.documentElement.scrollTop;
	var scrollTop=document.documentElement.scrollLeft;

	if(ele.getBoundingClientRect){
		if(typeof arguments.callee.offset!="number"){
			var temp=document.createElement('div');//创建临时的元素 并将该元素的位置设为（0,0）
			temp.sytyle.cssText="position:absolute;left:0;right:0";
			document.body.appendChild(temp);
			argument.callee.offset=-temp.getBoundingClientRect().top-scrollTop;
			document.removeChild(temp);
			temp=null;
		}

		var rect=ele.getBoundingClientRect();
		var offset=argument.callee.offset;

		return {
			left:rect.left+offset,
			right:rect.right+offset,
			top:rect.top+offset,
			bottom:rect.bottom+offset
		}
	}else{//不支持getBoundingClientRect()的浏览器处理方法
		var actualLeft=getElementLeft(ele);
		var actualTop=getElementTop(ele);

		return{
			left:actualLeft-scrollLeft,
			right:actualLeft+ele.offsetWidth-scrollLeft,
			top:actualTop-scrollTop,
			bottom:actualTop+ele.offsetHeight-scrollTop
		}
	}
}
	

5 综合测试

<div id="container" style="width:600px; height:400px;background-color: green; border:5px solid black;overflow: scroll; position:relative">
	<div id="con-1" style="width:500px;height:800px;background-color: yellow;position:relative; border:5px solid black">
		<div id="con-2" style="width:300px;height:300px;background-color: red;position: absolute;left:50px;top:50px;border:5px solid black;">
		</div>
	</div>
</div>

<script type="text/javascript">
var container=document.getElementById("container");
var div1=document.getElementById("con-1");
var div2=document.getElementById("con-2");
console.log("container占据的宽度"+container.offsetWidth);//610(600+边框)
console.log("container占据的高度"+container.offsetHeight);//410

console.log("container客户区宽度:"+container.clientWidth);//583(600-滚动条的宽度)
console.log("container客户区高度:"+container.clientHeight);//383

console.log("div1 scrollHeight:"+div1.scrollHeight);//800=元素的高度 ie7为810
console.log("div1 scrollWidth:"+div1.scrollWidth);//500=元素宽度    ie7为510

container.scrollTop=50;//设置滚动条的滚动高度
console.log("container scrollLeft:"+container.scrollLeft);//0
console.log("container scrollTop:"+container.scrollTop);//50

console.log("body的getBoundingClient:"+document.body.getBoundingClientRect().left);//0 ie7:2
console.log("container的getBoundingClientRect.left:"+container.getBoundingClientRect().left);//0 ie7:2
console.log("container的getBoundingClientRect.top:"+container.getBoundingClientRect().top);//0 ie7:2

console.log("div1的getBoundingClientRect.top:"+div1.getBoundingClientRect().top);//-45(-50+5) ie7:-43