JS & jQuery 获取元素位置尺寸

jQuery

位置

offset: 获取匹配元素在当前视口的相对偏移
position: 获取匹配元素相对父元素的偏移
scrollTop: 获取匹配元素相对滚动条顶部的偏移
scrollLeft: 获取匹配元素相对滚动条左侧的偏移

尺寸

height: 取得匹配元素当前计算的高度值
width: 取得第匹配元素当前计算的宽度值
innerHeight: 获取第匹配元素内部区域高度（包括补白、不包括边框）
innerWidth: 获取第匹配元素内部区域宽度（包括补白、不包括边框）
outerHeight: 获取第匹配元素外部高度（默认包括补白和边框）接受一个布尔值参数, 默认为false, 设置true时, 计算外边距在内
outerWidth: 获取第匹配元素外部高度（默认包括补白和边框）接受一个布尔值参数, 默认为false, 设置true时, 计算外边距在内

JS

window

window.innerWidth/innerHeight: 浏览器可视窗口宽度, 高度(不含浏览器的边框，但包含滚动条, 调出debug工具会减去其宽高).
window.outerWidth/outerHeight：整个浏览器宽度, 高度(包含浏览器的边框，因各个浏览器的边框不一样，得到的值也是不一样的).
window.screenLeft/screenTop:
- ie浏览器的内边缘距离屏幕边缘的距离
- chrome浏览器的外边缘距离屏幕边缘的距离
window.screenX/screenY:
- ie9/10浏览器的外边缘距离屏幕边缘的距离
- chrome浏览器的外边缘距离屏幕边缘的距离
  由此可知，chrome的screenLeft和screenX是相等的（其目的是为了兼容ie和firefox，两个属性都兼备了，但更趋向于firefox，chrome的这种做法不止这一处，还有很多，其实这种做法便于开发者移植，但对开发者的开发过程产生了一定的混淆），ie9/10的screenLeft是大于screenX的.
window.pageXOffset/pageYOffset: 表示浏览器X轴（水平）、Y轴（垂直）滚动条的偏移距离
兼容：ie9/10、chrome、firefox
window.scrollX/scrollY: 表示浏览器X轴（水平）、Y轴（垂直）滚动条的偏移距离。由此可知，在chrome和firefox中window.pageXOffset和window.scrollX是相等的，具体为什么会出现两个相等的属性值，不得而知
兼容：chrome、firefox
偏移距离是指页面被向上滑动, 向左滑动超出浏览器窗口部分的高度和宽度

screen

screen.width/height: 屏幕的宽度、高度(指的是屏幕的分辨率，单位为像素, 不是浏览器窗口)
此处必须是screen.width，而不是screenWidth，与接下来要说的各种宽度有所区别
screen.availWidth/availHeight: 屏幕的可用宽度、高度(通常与屏幕的宽度、高度一致, 有时要减去任务栏或Mac-OS系统上面导航条宽高)

元素属性

clientHeight, clientWidth属性:
- 有滚动条时: clientWidth=内边距宽度+内容宽度-元素垂直滚动条宽度
- 无滚动条时: clientWidth=内边距宽度+内容宽度
  滚动条一般会在边框内出现
clientLeft, clientTop: clientLeft为左边框宽度，clientTop为上边框宽度

offsetWidth/offsetHeight属性: 边框宽度+内边距宽度+内容宽度

#box {
  margin: 10px;
  border: 10px solid black;
  padding: 10px;
  width: 50px;
  height: 50px;
  background: gray; 
}

offsetLeft/offsetTop: 表示该元素相对于最近的定位祖先元素的距离.
- 定位指的是position: relative|absolute|fixed, 没有定位父元素则相对于整个文档的边缘.
- 距离是定位父元素边框内边, 到当前元素边框外边之间的距离
scrollWidth/scrollHeight:
- 内容未溢出: padding+content, 相等于clientHeight/clientWidth
- 内容溢出: 溢出内容实际占得高度, 即不管溢出内容是否隐藏高度都计算在内
scrollLeft, scrollTop: 在滑动条将页面向上, 向左滑动时, 页面向上, 向左被卷曲的高度和宽度

获取元素相对位置和绝对位置

下面两个函数可以用来获取元素绝对位置(相对于页面)的横坐标和纵坐标。
element.offsetParent: 获取离元素最近的定位祖先元素

function getElementLeft(element){
    var actualLeft = element.offsetLeft;
    var current = element.offsetParent;
    while (current !== null){
        actualLeft += current.offsetLeft;
        current = current.offsetParent;
    }
    return actualLeft;
}
function getElementTop(element){
    var actualTop = element.offsetTop;
    var current = element.offsetParent;
    while (current !== null){
        actualTop += current.offsetTop;
        current = current.offsetParent;
    }
    return actualTop;
}

由于在表格和iframe中，offsetParent对象未必等于父容器，所以上面的函数对于表格和iframe中的元素不适用。
有了绝对位置以后，获得相对位置(相对于浏览器窗口)就很容易了，只要将绝对坐标减去页面的滚动条滚动的距离就可以了。滚动条滚动的垂直距离，是document对象的scrollTop属性；滚动条滚动的水平距离是document对象的scrollLeft属性。

function getElementViewLeft(element){
    var actualLeft = element.offsetLeft;
    var current = element.offsetParent;
    while (current !== null){
    　actualLeft += current.offsetLeft;
    　current = current.offsetParent;
    }
    if (document.compatMode == "BackCompat"){
    　var elementScrollLeft=document.body.scrollLeft;
    } else {
    　var elementScrollLeft=document.documentElement.scrollLeft; 
    }
    return actualLeft-elementScrollLeft;
}
function getElementViewTop(element){
    var actualTop = element.offsetTop;
    var current = element.offsetParent;
    while (current !== null){
    　actualTop += current. offsetTop;
    　current = current.offsetParent;
    }
    if (document.compatMode == "BackCompat"){
    　var elementScrollTop=document.body.scrollTop;
    } else {
    　var elementScrollTop=document.documentElement.scrollTop; 
    }
    return actualTop-elementScrollTop;
}

**说明: **
document.compatMode用来判断浏览器渲染模式:
BackCompat：标准兼容模式关闭 document.body返回正确值
CSS1Compat：标准兼容模式开启 document.documentElement返回正确值
当document.compatMode等于BackCompat时，浏览器客户区宽度是document.body.clientWidth；当document.compatMode等于CSS1Compat时，浏览器客户区宽度是document.documentElement.clientWidth。

**补充: **
scrollTop和scrollLeft属性是可以赋值的，并且会立即自动滚动网页到相应位置，因此可以利用它们改变网页元素的相对位置。另外，element.scrollIntoView()方法也有类似作用，可以使网页元素出现在浏览器窗口的左上角, 详细可以百度百度。

关于document.body与document.documentElement

可以认为document.body对应于body标签元素, document.documentElement对应于html标签元素. 但它们在如上, 获取元素尺寸属性时会有些不同.

标准模式下(HTML4, 有文档类型声明...)
html, body默认都是内容高度, 可是:
document.documentElement.clientHeight 等于浏览器窗口可视高度
document.body.scrollHeight 等于浏览器窗口可视高度
document.body.offsetTop = 0
下面测试结果可能看不出来, 标准模式下document.documentElement.scrollTop返回正确值, document.�body.scrollTop会是0
其他属性正常
```
 
 
 
  
  test
  
 
 
 
 
```

非标准模式下
html, body默认100%高度, 可是:
document.documentElement获取的属性值基本正常
document.body.clientHeight 与 document.body.scrollHeight 获取的都是浏览器窗口可视高度
document.body.offsetTop = 0
下面测试结果可能看不出来, 非标准模式下document.documentElement.scrollTop返回0, document.�body.scrollTop会是正确值
其他属性也正常
去掉文档类型声明

test

body和html更多内容可以参考我另一篇文章