元素操作-宽度高度的兼容问题

偏移量

元素的可见大小由宽度高度决定，其中还要包括内边距、滚动条、边宽大小（不包括外边距），通过下面四个属性可以获得。

offsetWidth、offsetHeigh、offsetLeft、offsetTop

offsetHeight/offsetWidth: 表述元素的外尺寸：
元素内容 + 内边距 + 边框(不包括外边距)，给出元素在页面中占据的宽度和高度的总计。

注意：把元素的边框和滚动条计算在内。

offsetWidth =  border-left-width + padding-left + width + padding-right + border-right-width;
offsetHeight =  border-top-width + padding-top + height + padding-bottom + border-bottom-width;

包含关系：
offsetLeft/offsetTop: 表示该元素的左上角（边框外边缘）与已定位的父容器（offsetParent对象）左上角的距离。
offsetParent元素是指元素最近的定位（relative，absolute）祖先元素，可递归上溯。

客户区域大小

clientWidth、clientHeight

clientWidth/clientHeight: 用于描述元素的内尺寸：元素内容 + 两边内边距。

clientWidth = width+padding（left、right）
clientHeight = height+padding（top、bottom）

滚动大小

scrollWidth、scrollHeight、scrollLeft、scrollTop

scrollHeight/scrollWidth: 元素内容的总高度或宽度

scrollLeft/scrollTop：是指元素滚动条位置，它们是可写的(被隐藏的内容区域左侧/上方的像素)

scrollHeight：是元素的padding加元素内容的高度。这个高度与滚动条无关，是内容的实际高度。

计算方式 ：scrollHeight = topPadding + bottomPadding + 内容margix box的高度。

在浏览器中的区别在于：

IE6、IE7 认为scrollHeight 是网页内容实际高度，可以小于clientHeight。

FF、Chrome 认为scrollHeight 是网页内容高度，不过最小值是clientHeight。

浏览器窗口的滚动条位置：window对象的 pageXoffset 和 pageYoffset , IE 8及更早版本可以通过scrollLeft和scrollTop属性获得滚动条位置。

偏移量

元素的可见大小由宽度高度决定，其中还要包括内边距、滚动条、边宽大小（不包括外边距），通过下面四个属性可以获得。

offsetWidth、offsetHeigh、offsetLeft、offsetTop

offsetHeight/offsetWidth: 表述元素的外尺寸：
元素内容 + 内边距 + 边框(不包括外边距)，给出元素在页面中占据的宽度和高度的总计。

注意：把元素的边框和滚动条计算在内。

offsetWidth =  border-left-width + padding-left + width + padding-right + border-right-width;
offsetHeight =  border-top-width + padding-top + height + padding-bottom + border-bottom-width;

包含关系：
offsetLeft/offsetTop: 表示该元素的左上角（边框外边缘）与已定位的父容器（offsetParent对象）左上角的距离。
offsetParent元素是指元素最近的定位（relative，absolute）祖先元素，可递归上溯。

客户区域大小

clientWidth、clientHeight

clientWidth/clientHeight: 用于描述元素的内尺寸：元素内容 + 两边内边距。

clientWidth = width+padding（left、right）
clientHeight = height+padding（top、bottom）

滚动大小

scrollWidth、scrollHeight、scrollLeft、scrollTop

scrollHeight/scrollWidth: 元素内容的总高度或宽度

scrollLeft/scrollTop：是指元素滚动条位置，它们是可写的(被隐藏的内容区域左侧/上方的像素)

scrollHeight：是元素的padding加元素内容的高度。这个高度与滚动条无关，是内容的实际高度。

计算方式 ：scrollHeight = topPadding + bottomPadding + 内容margix box的高度。

在浏览器中的区别在于：

IE6、IE7 认为scrollHeight 是网页内容实际高度，可以小于clientHeight。

FF、Chrome 认为scrollHeight 是网页内容高度，不过最小值是clientHeight。

浏览器窗口的滚动条位置：window对象的 pageXoffset 和 pageYoffset , IE 8及更早版本可以通过scrollLeft和scrollTop属性获得滚动条位置。

• scrollHeight: 获取对象的滚动高度。
• scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
• scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
• scrollWidth:获取对象的滚动宽度
• offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
• offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
• offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
• document.documentElement.scrollTop 垂直方向滚动的值
• event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
　
• 以上主要指IE之中，FireFox差异如下：
• IE6.0、FF1.06+：
• clientWidth = width + padding
• clientHeight = height + padding
• offsetWidth = width + padding + border
• offsetHeight = height + padding + border
• IE5.0/5.5：
• clientWidth = width - border
• clientHeight = height - border
• offsetWidth = width
• offsetHeight = height

一些常见的细节

document.documentElement与doucment.body的区别

document.body是DOM中Document对象里的body节点

document.documentElement无法正确取到clietHeight,scorllHeight等值，比如clietHeight = 0,可以见ie的怪异模型并没有把html作为盒子模型的一部分，在现在很少使用怪异模型。（注：不过在实测中，可以理解为document.documentElement可以理解为浏览器的可见窗口区域，而body则仅为内容区域。我们这里获取常见的三个值（scrollWidth、offsetWidth和clientwidth）来比较一下：

document.documentElement.scrollWodth 返回整个文档的宽度

document.documentElement.offsetWidth 返回整个文档的可见宽度

document.documentElement.clientWidth 返回整个文件的可见宽度（不包含边框clientwidth = offsetWidth-borderWidth）

不过，一般来说，我们不会给document.documentElement来设置边框，所以这里的clientWidth与offsetWidth一致

document.body.scrollWidth返回body的宽度

这里的scrollWidth有个不一致的地方， 基于webkit的浏览器(chrome safari)返回的是整个文档的宽度，也就是和document.documentElement.scrollWridth个人觉得opera和FF算是比较合理的

document.body.clientWidth返回body的clientWidth(不包含边框),clientWridth = offsetWrith- borderWidth前面的例子，会发现body和documentElement的有些值是相等的，这并不是表示他们是等同的。而是因为当我们没有给body设置宽度的时候，document.body默认占满整个窗口宽度，于是就有：

document.body.scrollWidth = document.documentElement.scrollWidth
document.body.offsetWidth = document.documentElement.offsetWidth
document.body.clientWidth = document.documentElement.clientWidth - document.body.borderWidth（body的边框宽度）
当我们给body设置了一个宽度的时候，区别就出来了
为什么offsetWridth始终比clientWridth大？
原因就在于这个边线，在FF1.06和ie6+上，有这样的区别
clientWidth = width+padding;
clientHeight = height+padding;
offsetWidth = width+padding+border;
offsetHeight = height+padding+border;
当然，如果出现的滚动条，offsetWidth也会包含滚动条的宽度，而clientWidth是不包含滚动条的宽度的
ie8/9
这两个差不多，唯一的区别是ie9包含window.innerWidth属性，而ie8不包含window.innerWidth属性
1，document.documentElement.scrollWidth返回整个文档的宽度，和FF等浏览器一致。
2，document.documentElement.offsetWidth返回整个文档的可见宽度(包含滚动条，值和innerWidth一样)
3，document.documentElement.clientWidth返回整个文档的可见宽度（不包含边框），和FF等浏览器一样，clientWidth  = offWidth滚动条宽度document.body.scorllWidth返回body 的宽度。
这里的scorllWidth和FF等浏览器的有点区别，这里的并不包括body本身的border宽度，因此例子中，相比FF少了10px

document.body.offsetWidth返回 body的offsetWidth，和FF等浏览器一致，document.body.clientWidth（不包含border），和FF浏览器一致，clientWidth = offsetWidth-borderWidth

ie7与ie9/ie8的主要区别：
1，document.documentElement.offsetWidth的返回值不一样。ie8/9的document.documentElement.offsetWidth包含滚动条，ie7的document.documentElement.offsetWidth不包含。
2，document.documentElement.scorllWidth返回整个文档的宽度，这里的ie8/9,ff等浏览器又有不一致，对于ie8/9,ff等浏览器，scorllWidth最小不会小于窗口的宽度，但是在ie下没有这个限制，文档有多小，这个就有多小，其他都是一致的。

ie6
ie6的document.documentElement返回值与ie9/8没有区别，ie的document.body当没有给body设置宽度的时候，body默认是沾满整个文档的（其他浏览器都是占满整个窗口），最小值是整个窗口的大小，就是说body指向了根元素。
1.document.body.scorllWidth返回body的宽度，和ie8/9/7一致
2.document.body.offsetWidth返回body的offsetWidth,由于body的不同，这里的offsetWidth = scorllWidth+borderWidth
3.document.body.clientWidth返回body的clientWidth(不包含border)clientWidth = offsetWidth-borderWidth
另外，有一点和ie7一样，就是document.documentElement.scorllWidth没有最小宽度的限制。