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* {
margin: 0;
border: 0;
padding: 0;
}
html {
background: blue;
border: 10px solid red;
margin: 10px;
}
body {
background: pink;
border: 10px solid green;
margin: 10px;
padding: 10px;
}
非标准模式下
html, body默认100%高度, 可是:
document.documentElement获取的属性值基本正常
document.body.clientHeight 与 document.body.scrollHeight 获取的都是浏览器窗口可视高度
document.body.offsetTop = 0
下面测试结果可能看不出来, 非标准模式下document.documentElement.scrollTop返回0, document.�body.scrollTop会是正确值
其他属性也正常
去掉文档类型声明
test* {
margin: 0;
border: 0;
padding: 0;
}
html {
background: blue;
border: 10px solid red;
margin: 10px;
}
body {
background: pink;
border: 10px solid green;
margin: 10px;
padding: 10px;
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
