oDiv.clientWidth, oDiv.clientHeight
兼容性:全兼容
內容區域的寬度、高度，不包括邊框[裸的寬度和高度]
content_width+padding_left+padding_right, content_height+padding_top+padding_bottom
注：
- 返回的寬度和高度[此值比較準確, CSS中給定值后才有效]
- 返回的是屏幕上可以看到的大小，有滾動條比實際值小
oDiv.scrollWidth, oDiv.scrollHeight
兼容性:IE8+，Opera11+
返回的是實際的寬度和高度[包括隱藏的部分]
滾動的高度+可視區域的高度
注：
- 沒有隱藏部分，等價于clientWidth, clientHeight
- 有滾動條時，scrollHeight = scrollTop + clientHeight
oDiv.offsetWidth, oDiv.offsetHeight
兼容性:全兼容
所占實際的大小(不受內部子元素大小的影響，只和本身元素大小的設定有關)
width + padding + border
悟：可以計算滾動條的寬度offsetWidth - border*2 - clientWidth
# 獲取滾動條的寬度
function getScrollbarWidth(){
var el = document.createElement('p');
styles = {
width:'100px',
height:'100px',
overflowY:'scroll'
};
for(var i in styles){
el.style[i] = styles[i];
}
document.body.appendChild(el);
var scrollbarWidth = el.offsetWidth - el.clientWidth;
el.remove();
return scrollbarWidth;
}
窗口視口的大小
獲取window窗體的內部寬度，不包括用戶界面元素，比如窗框
W3C:window.innerWidth, window.innerHeight[IE9+][只讀]
注：不包括地址欄等，只是顯示內容的視口的高度
可視區域的高度
window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
clientWidth/clientHeight
[不包括滾動條][在頁面中所占的寬度除去滾動條的寬度]
包括padding+content
# IE
document.documentElement.clientWidth
document.documentElement.clientHeight
# IE7之前的版本
document.body.clientWidth,document.body.clientHeight
oDiv.clientLeft/oDiv.clientTop
兼容性:全兼容
左邊框的寬度，上邊框的寬度
注：只能是左邊和上邊的寬度
內容區域相對于元素左上角的位置，即border_left_width, border_top_width
oDiv.offsetLeft/oDiv.offsetTop
兼容性:全兼容
- 表示相對于最近的祖先定位元素（CSS position 屬性被設置為 relative、absolute 或 fixed 的元素）的左右偏移值
- position不是static的元素
說明:
- 返回距離父元素左邊和高度的距離
- 必須設置了定位才能計算[即offsetParent]
- 包括margin + 父元素的padding + 父元素的borderWidth[完全屬于自己的部分距離完全屬于父元素的部分]
注:offsetParent取最近的那個父級元素
- 在IE6/7中
offsetLeft = (offsetParent的padding-left) + (當前元素的margin-left) - 在IE8/9/10及Chrome中
X offsetLeft = (offsetParent的margin-left) + (offsetParent的border寬度) + (offsetParent的padding-left) + (當前元素的margin-left)X就是距離offsetParent邊框的 距離
oDiv.scrollLeft/oDiv.scrollTop
兼容性:[全兼容][可讀可寫]
釋義:當元素其中的內容超出其寬高的時候，元素被卷起的高度和寬度[指的是擁有滾動條的元素而非子元素]
注：有滾動條的元素的滾動距離
eg: outer, inner，只有outer的這個屬性才有意義
jQuery部分
.position()
相對于offsetParent的當前坐標值
{
left:相對于offsetParent元素左側的距離，
top :相對于offsetParent元素頂部的距離
}
.scrollLeft() || .scrollTop()
釋義1:相對于水平滾動條左邊的距離，滾動條居左或元素不能滾動，值為0
釋義2:相對于垂直滾動條頂部的距離，滾動條居頂或元素不能滾動，值為0
clientX, clientY
兼容性:全兼容
釋義:相對于瀏覽器(可視區域左上角0,0)的坐標
返回發生時鼠標在視口中的坐標
鼠標相對于window的偏移
IOS上=pageX，pageY
ayerX, layerY/offsetX, offsetY
兼容性:很糟糕
返回發生時鼠標相對于目標對象的坐標
Opera支持addEventListener,但不支持layerX, layerY
bug解釋：
在IE7以及以下瀏覽器下，只有當當前目標元素為offsetParent是才計算坐標值，否則，它就會拿當前目標元素的offsetParent來計算。還有，當發現元素應用了position: relative后，IE會去尋找下一個offsetParent來計算offsetY，但又不是offsetX。是的，讀兩次，很蛋疼吧！
pageX/pageY(W3C)
兼容性:IE9+
返回的是相對于頁面的坐標
鼠標相對于document的坐標
# 拖動實例思路
# 元素必須有定位屬性
mousedown
#記錄元素左上角位置
var startLeft = layerX/offsetX
var startTop = layerY/offsetY
# mousemove
# mouseup
注：
- 可能會出現禁止光標,可以禁止默認事件
- 拖動的情況比較復雜，建議用第三方腳本
跳轉到可見區域內
$("#logo_bbc")[0].scrollIntoView();
window.scrollTo(0, 0);
pageXOffset,pageYOffset
兼容性:IE9+
表示整個頁面滾動的像素值（水平方向的和垂直方向的）
window.pageXOffset
window.pageYOffset
CSS-位置
- element.offsetParent 返回元素的偏移容器[元素的第一個祖先定位元素，用來計算offsetLeft，offsetTop(不一定與parentNode相等)]。
注：在IE和Opera瀏覽器下，position: fixed的元素沒有offsetParent - element.offsetLeft 返回元素的水平偏移位置。
- element.offsetTop 返回元素的垂直偏移位置。
- element.scrollTop 返回元素上邊緣與視圖之間的距離。[元素被隱藏的上方的距離]
- element.scrollLeft 返回元素左邊緣與視圖之間的距離。
- document.documentElement.scrollTop 垂直方向滾動的值
CSS-尺寸
- element.scrollWidth 返回元素的實際寬度。[元素內容 + 內邊距(包括滾動條)]
- element.scrollHeight 返回元素的實際高度。
document.body.scrollWidth document.body.scrollHeight
//給定寬高小于瀏覽器窗口
scrollWidth和scrollHeight通常是此瀏覽器窗口的寬高
//給定寬高大于瀏覽器窗口，且子元素小于給定寬高
寬高為設定的寬高+padding*2+border*2
//給定寬高大于瀏覽器窗口，且內容大于給定寬高
寬高為子元素的寬高 +body的padding[1個]+margin[1個]+border[1個]
//[無滾動軸時]
scrollWidth = clientWidth = style.width + style.padding * 2
//[有滾動軸時]
scrollWidth = 實際內容的寬度 + padding * 2
scrollHeight = 實際內容的高度 + padding * 2
- element.clientWidth 返回元素的可見寬度。[元素內容 + 內邊距(不包括滾動條)]
- element.clientHeight 返回元素的可見高度。
- element.offsetHeight 返回元素的高度。[元素內容 + 內邊距 + 邊框(不包括外邊距)]
- element.offsetWidth 返回元素的寬度。
- element.innerWidth 返回元素內部的寬高，包括padding，不包括border
- element.outerWidth 返回元素集合中第1個元素當前計算寬高度值，包括padding，border，選擇性的margin
window.outerWidth表示整個瀏覽器窗體的大小，包括任務欄等[IE9+] - element.outerHeight
window.outerHeight表示整個瀏覽器窗體的大小，包括地址欄，收藏欄，標簽欄，任務欄等[IE9+]
jQuery相關部分
.width() || .height()
只包含content的凈寬高，不包括margin,border,padding
.width()與.css('width')區別
.width()返回結果無單位
.css('width')的結果有單位
.innerWidth() || .innerHeight()
釋義:content + padding
.outerWidth() || .outerHeight()
釋義:content + padding + border
.outerWidth(true) || .outerHeight(true)
釋義:content + padding + border + margin
getBoundingClientRect
返回一個對象，包含top,left,right,bottom,width,height
- width、height 元素自身寬高
- top 元素上外邊界距窗口最上面的距離
- right 元素右外邊界距窗口最上面的距離
- bottom 元素下外邊界距窗口最上面的距離
- left 元素左外邊界距窗口最上面的距離
- width 元素自身寬(包含border,padding)
- height 元素自身高(包含border,padding)
通常認為 <html> 元素是在 Web 瀏覽器的視口中滾動的元素（IE6 之前版本運行在混雜模式下時是 <body> 元素）因此，帶有垂直滾動條的頁面總高度就是 document.documentElement.scrollHeight
// 在沒有滾動條的情況下，元素內容的總高度
scrollHeight
// 在沒有滾動條的情況下，元素內容的總寬度
scrollWidth
// 被隱藏在內容區域左側的像素數。通過設置這個屬性可以改變元素的滾動位置
scrollLeft
// 被隱藏在內容區域上方的像素數。通過設置這個屬性可以改變元素的滾動位置
scrollTop
