元素的大小和位置

几乎所有的浏览器都提供了一套关于元素大小和位置的属性，让我们可以方便的进行控制。

 

1. 偏移量

offsetWidth：包括元素内容区，垂直滚动条，左右边框，左右内边距的宽度之和（不包括外边距）；

offsetHeight：包括元素内容区，水平滚动条，上下边框，上线内边距的高度之和（不包括外边距）；

offsetLeft：元素左方的外边距距离包含元素左方的内边框之间的距离；

offsetRight：元素上方的外边距距离包含元素上方的内边框之间的距离；

offsetParent：引用包含元素；

注意：上面四个属性都是以像素为单位，offsetParent不一定会是parentNode，parentNode指的是父元素。如果某个元素被包含在某个div中，如果不设置div的position属性为absolute或者relative，offsetParent会指向body。

 

很多时候，我们要确定元素在页面上的相对位置，我们可以用循环去找offsetParent的方式，直到根元素，并将每次取出来的元素的offsetLeft和offsetTop相加就可以得到相对于页面的偏移量。

function getOffsetPos( element )

{

　　var pos = {

　　　　x: 0,

　　　　y: 0

　　}

　　while ( element ) {

　　　　pos.x += element.offsetLeft;

　　　　pos.y += element.offsetTop;

　　　　element = element.offsetParent;

　　}

　　return pos;

}

 

2. 客户区大小

clientWidth：包括元素内容区宽度加上左右内边距宽度之和；

clientHeight：包括元素内容区高度加上上下内边距高度之和；

注意：滚动条的高度或宽度不算在内。如果某个宽度是100px的div（内边距为0px）出现了一个垂直滚动条，客户区宽度就会小于100px。通常情况下我们用css设置的width或height是设置的元素内容区的值，即不包括边框（border）和内边距（padding）。

 

如何取页面视口大小：

function getViewportSize() {

　　var size = { 

　　　　w: 0,

　　　　h: 0

　　}

　　if（ document,body.clientWidth ) {

　　　　size.w = document.body.clientWidth;

　　　　size.h = document.body.clidentHeight;

　　} else {

　　　　size.w = document.documentElement.clientWidth;

　　　　size.h = document.documentElement.clientHeight;

　　}

　　return size;

}

 

3. 滚动计算

scrollHeight：元素内容区加上内边距的实际高度（包含可以滚动的高度）；

scrollWidth：元素内容区加上内边距的实际宽度（包含可以滚动的宽度）；

scrollLeft：滚动之后，隐藏在左侧的区域的宽度，通过设置该属性可以调整滚动位置；

scrollTop：滚动之后，隐藏在上方的区域的高度，通过设置该属性可以调整滚动位置；

如果出现滚动条，滚动属性的值应该是要大于客户区大小的属性，但是没有出现滚动条的时候，各种浏览器表现出来的情况有所不同。为了能取出视口大小最准确的值，可以比较两类属性中的值的大小，取出最大的。

转载于:https://www.cnblogs.com/iRidescent-ZONE/archive/2012/07/16/2594319.html