标准模式和混杂模式，js和jq下的元素高度，宽度，偏移及视口宽度

页面具有 DTD(文档类型定义)，或者说指定了 DOCTYPE 时，使用 document.documentElement。怪异模式||混杂模式页面不具有 DTD，或者说没有指定了 DOCTYPE，时，使用 document.body。怪异模式||混杂模式

兼容怪异模式和标准模式

var scrollTop = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;

最强的兼容模式：

Edge 模式告诉 IE 以最高级模式渲染文档，也就是任何 IE 版本都以当前版本所支持的最高级标准模式渲染，避免版本升级造成的影响。简单的说，就是什么版本 IE 就用什么版本的标准模式渲染

使用以下代码强制 IE 使用 Chrome Frame 渲染

var box=document.getElementById("box");
var offhei=box.offsetHeight;
var outhei= $("#box").outerHeight();

当前元素的高度

DOM：box.offsetHeight
jq:$("#box").outerHeight()

element.offsetHeight	返回元素的高度。
element.offsetWidth	返回元素的宽度。

//2者相等等于盒子的宽+padding-left+padding-right+border*2;(不包括margin)

当前元素相对于左边的偏移

DOM：box.offsetLeft
jq:$("#box").offset().left //小写

1>设置或返回当前匹配元素相对于当前文档的偏移

2>该函数只对可见元素有效

设置坐标可以用$.offset({top: 0, left: 0});

element.offsetLeft	返回元素的水平偏移位置。
element.offsetTop	返回元素的垂直偏移位置。

//2者相等：等于盒子的外边距

浏览器的视口宽度

DOM：document.documentElement.clientWidth?document.documentElement.clientWidth:document.body.clientWidth;//兼容模式返回视窗宽度
jq:$(window).width() //这里是小写

document.documentElement.clientWidth	标准模式下的视窗宽度
document.body.clientWidth	混杂模式下的视窗宽度。

document.documentElement.Height	标准模式下的视窗高度
document.body.clientHeight	混杂模式下的视窗高度。

//2者相等：等于窗口的宽度

innerHeight()函数用于设置或返回当前匹配元素的内高度。

内高度包括元素的内边距(padding)，但不包括外边距(margin)、边框(border)等部分的高度。

outerHeight()函数用于获取当前匹配元素的外高度。

外高度默认包括元素的内边距(padding)、边框(border)，但不包括外边距(margin)部分的高度。你也可以指定参数为true，以包括外边距(margin)部分的高度。

innerWidth()函数用于设置或返回当前匹配元素的内宽度。

内宽度包括元素的内边距(padding)，但不包括外边距(margin)、边框(border)等部分的高度。

outerWidth()函数用于获取当前匹配元素的外宽度。

外宽度默认包括元素的内边距(padding)、边框(border)，但不包括外边距(margin)部分的宽度。你也可以指定参数为true，以包括外边距(margin)部分的宽度。如下图：

盒子

函数	高度范围	jQuery版本	支持写操作
height()	height	1.0+	1.0+
innerHeight()	height + padding	1.2.6+	1.8.0+
outerHeight()	height + padding + border	1.2.6+	否
outerHeight(true)	height+padding+border+margin	1.2.6+	否