不同浏览器获取DOM元素的各种高度

一：HTML中各种高度

一：介绍

不止一次被HTML中各种高度和宽度搞晕了，搞的每次做项目时都要去查相关的资料。趁着有时间好好把这块的资料整理一下，以被以后使用。

下面是一张W3C中Window对象属性图。从图中我们可以看到有关高度和宽度的几个属性，他们分别是innerHeight，innerWidth，outerHeight，outerWidth， pageXOffset，pageYOffset，screenLeft，screenTop，screenX，screenY。下面我们一个个来验证他们各代表什么。

二：innerHeight、innerWidth、outerHeight、outerWidth

innerHeight，innerWidth：返回窗口的文档显示区的高度和宽度(不包括菜单栏、工具栏以及滚动条的高度)。IE不支持这些属性，它用document.documentElement(html元素)或者document.body(与IE版本有关)的clientWidth和clientHeight代替。在各个浏览器测试效果如下：

• 
  谷歌
• 
  IE9+
• 
  IE8
• 
  IE7
• 
  IE5
• 
  FF

查看上图可知除了IE9以下不支持innerHeight属性，其余版本浏览器均支持。只是在不同的浏览器中有稍许区别。所有的浏览器均支持document.documentElement.clientHeight与document.body.clientHeight属性。只不过在IE5中document.documentElement.clientHeight为0。所以要兼容所有浏览器获取文档显示区高度和宽度可用以下代码。

    lyq.getClientHeight = function(){
        var clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
        return clientHeight;
    }

outerHeight，outerWidth：返回窗口的外部高度和高度。IE9以下不支持该属性，其余浏览器支持该属性。但是在谷歌浏览器中outerHeight与innerHeight、outerWidth与 outerWidth返回相同的值即窗口的文档显示区的高度和宽度，而非浏览器窗口的大小。但是在其它浏览器中如FF，Safari返回浏览器窗口本身的尺寸。

screenLeft，screenTop，screenX，screenY：声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。

screenLeft，screenTop在不同浏览器下的测试。

• 
  谷歌
• 
  IE
• 
  FF
• 
  QQ
• 
  UC

经过观察可以发现screenTop，screenLeft除了在火狐上不支持以外，在其它浏览器上均支持。只不过在IE和QQ浏览器上是计算文档显示区距离屏幕的坐标，而谷歌，UC是计算整个浏览器距离屏幕的坐标(包含菜单栏，工具栏等)。具体情况还要视浏览器定。

    clientWidth = height + padding-left + padding-right - scrollbar.width(对大部分浏览器)
    clientHeight = 同clientWidth
    clientTop = border-top
    clientLeft = border-left
    横向滑动条的高度 = height + padding-top + padding-bottom - clientHeight
    横向滑动条的宽度 = width + padding-left + padding-right
    垂直滑动条的高度 = height + padding-top + padding-bottom
    垂直滑动条的宽度 = width + padding-left + padding-right - clientWidth
    
    offsetHeight：对于IE6，IE7，IE8以及最新的FF，谷歌，在元素上都是clientHeight + 滚动条高度 + 边框
    offsetWidth：同offsetHeight。
    offsetTop = margin-top + top(相对于父窗口)
    offsetLeft = margin-left + left(相对于父窗口)
    
    scrollHeight = padding-top + padding-bottom + 内容margix box的高度。这个与滚动条无关，是内容的实际高度。
    scrollWidth = 同scrollHeight。
    在浏览器中的区别在于：
    IE6，IE7认为scrollHeight是网页内容的实际高度，可以小于clientHeight。
    FF，Chrome认为scrollHeight是网页内容高度，最小值是clientHeight。
    注：以上都是对一般元素而言，body和documentElement的clientHeight，offsetHeight和scrollHeight在各个浏览器中的计算方式又不同。在所有的浏览器中，如果你想获取整个视窗的高度，你要用documentElement.clientHeight，
因为body.clientHeight是由它的内容决定的。
    FF19
    在body上设置overflow:scroll就是设置浏览器的滚动条，导致body.clientHeight永远等于body.scrollHeight。
    body
    clientHeight = body.padding + body.height(css设置或内容撑的)
    offsetHeight = clientHeight + body.border
    scrollHeight == clientHeight;
    documentElement
    clientHeight = window视窗高度 - scrollbar.height
    offsetHeight = body.offsetHeight + body.margin;
    scrollHeight >= clientHeight
    元素上
    offsetHeight = padding + border + height
    clientHeight = padding + height - scrollbar.height
    scrollHeight >= clientHeight
    结果分析：FF认为scrollHeight的最小高度是clientHeight
    
    Chrome
    body
    clientHeight = body.padding + body.height(css设置或内容撑的)
    offsetHeight = body.clientHeight + bodt.border
    scrollHeight = body.padding + 内容的高度(与height样式无关) 最小值为clientHeight
    documentElement
    clientHeight = window视窗高度 - 滚动条高度
    offsetHeight = body.offsetHeight + body.margin
    scrollHeight = 内容的高度(与body上的height无关)
    元素上
    offsetHeight = padding + border + height
    clientHeight = padding + height - scrollbar.height
    scrollHeight >= clientHeight
    
    Safari5
    body
    clientHeight = body.padding + body.height（CSS或内容撑的）;
    offsetHeight = body.clientHeight + border;
    scrollHeight = body.padding + 内容的高度(与height样式无关)，但最小值是documentElement.clientHeight。
    documentElement
    clientHeight = window窗口大小 – 滚动条大小
    offsetHeight = body.offsetHeight + body.margin
    scrollHeight= 内容的高度（与body上的height无关），但最小值是documentElement.offsetHeight。
    
    IE8
    在IE8下，滚动条的大小是17个像素。
    body
    clientHeight= body.padding + body.height(css设置或内容撑大)
    offsetHeight = body.clientHeight + body.border
    scrollHeight = 内容的高度（与body上的height无关），但最小值是clientHeight。
    documentElement
    clientHeight = 窗口大小（除去滚动条后）
    offsetHeight = clientHeight + 滚动条大小 + body.border
    scrollHeight= 内容的高度（与body上的height无关），但最小值是body.offsetHeight+ margin。
    元素上
    offsetHeight = padding + border + height。
    clientHeight = padding + height - scrollbar.width。
    scrollHeight >= clientHeight
    从结果分析IE8认为scrollHeight>=clientHeight。
    offsetLeft = 元素border左上角到画布原点的距离 或 到offsetParent的borderbox顶部的距离。
    
    IE7
    在IE7中，body上设置的滚动条并不是窗口的滚动条，这个需要注意。
    body
    clientHeight= body.padding + height(css设置或内容撑大)– body上的滚动条。
    offsetHeight= clientHeight + 滚动条的大小+body.border。
    scrollHeight=   内容的高度（与body上的height无关）。
    documentElement
    clientHeight = window视窗大小（与滚动条的有无无关）
    offsetHeight = clientHeight。
    scrollHeight = body.offsetHeight + border.margin
    元素
    offsetHeight = padding + border + height。
    clientHeight = padding + height - scrollbar.width。
    scrollHeight = padding + 内容margin box的高度
    从结果分析，IE7认为scrollHeight可以小于clientHeight。
    offsetLeft = 元素border box左上角到父容器（不是offsetParent）的borderbox左上角的距离。
    
    IE6
    在IE6中，与IE7类似， body上设置的滚动条并不是窗口的滚动条。
    body
    clientHeight = body.padding + body.height
    offsetHeight = body.clientHeight + body.border + body上滚动条大小。
    scrollHeight =内容的高度（与body上的height无关）。
    documentElement
    在IE6中，与IE7类似，虽然body上设置的滚动条并不是窗口的滚动条，但它的clientHeight和offsetHeight还算与其它浏览器想统一。
    clientHeight = 窗口大小（除去窗口滚动条大小后）
    offsetHeight =clientHeight + body.border
    scrollHeight = body.offsetHeight + body.margin
    元素
    offsetHeight = padding + border + height。
    clientHeight = padding + height - scrollbar.width。
    scrollHeight = padding + 内容margin box的高度
    从结果分析，IE6认为scrollHeight可以小于clientHeight。
    
    scrollLeft：设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
    scrollTop：设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
    
    Event对象属性
    clientX：相对于可视区域的x坐标。
    clientY：相对于可视区域的y坐标。 
    screenX：相对于用户屏幕x坐标。
    screenY：相对于用户屏幕的y坐标。
    
    IE特有属性
    offsetX：鼠标相对于目标事件的父元素的内边界在x坐标的位置
    offsetY：鼠标相对于目标事件的父元素的内边界在y坐标的位置
    x：设置或获取鼠标指针位置相对于父文档的y坐标。同clientX
    y：设置或获取鼠标指针位置相对于父文档的y坐标。同clientY 
    
    说明：event.clientX返回事件发生时，mouse相对于客户窗口的x坐标，event.X也一样。但是如果设置事件对象的定位属性值为relative，event.clientX不变，而event.x返回事件对象的相对于本体的坐标。火狐下用pageX，pageY代替x与y属性。

说了这么多，我们来看看jQuery中是如何处理这些差异的(jQuery中的event对象重新封装了)

    offset()：获取匹配元素在当前视口的相对偏移，返回的对象包含两个整型属性：top和left。只对可见元素有效。
    offsetParent()：返回最近的定位祖先元素。
    position()：获取匹配元素相对父元素的偏移，返回的对象包含两个整型属性：top和left。
    scrollTop()：获取匹配位置相对滚动条顶部的偏移，此方法对可见和隐藏元素均有效。同JS中scrollTop。
    scrollLeft()：获取匹配位置相对滚动条左侧的偏移，此方法对可见和隐藏元素均有效。同JS中scrollLeft。
    event.pageX：鼠标相对于文档的左边缘的位置。
    event.pageY：鼠标相对于文档的上边缘的位置。
    innerHeight()：获取匹配元素内部区域的高度(含padding，不含border)
    innerWidth()：同innerHeight();
    outerHeight(options)：默认为false，包含padding和边框；为true，margin也计算在内。
    outerWidth(options)：同outerHeight(options)。
    height()：返回内容高度，不含padding。
    width()：同height();
    css("height")：返回的数值带有"px"。而height()则没有。
    css("width")：返回的数值带有"px"。而width()则没有。
    说明：height()总是返回内容宽度，不管CSS box-sizing 属性值。height('value')设置的容器宽度是根据CSS box-sizing 属性来定的，将这个属性值改成border-box，将造成这个函数改变这个容器的outerHeight(false)，而不是原来的内容高度。