oDiv.clientWidth, oDiv.clientHeight
兼容性:全兼容
內(nèi)容區(qū)域的寬度、高度黍衙，不包括邊框[裸的寬度和高度]
content_width+padding_left+padding_right, content_height+padding_top+padding_bottom
注：
- 返回的寬度和高度[此值比較準(zhǔn)確, CSS中給定值后才有效]
- 返回的是屏幕上可以看到的大小亦渗，有滾動(dòng)條比實(shí)際值小
oDiv.scrollWidth, oDiv.scrollHeight
兼容性:IE8+预明，Opera11+
返回的是實(shí)際的寬度和高度[包括隱藏的部分]
滾動(dòng)的高度+可視區(qū)域的高度
注：
- 沒(méi)有隱藏部分柠逞，等價(jià)于clientWidth, clientHeight
- 有滾動(dòng)條時(shí)套像，scrollHeight = scrollTop + clientHeight
oDiv.offsetWidth, oDiv.offsetHeight
兼容性:全兼容
所占實(shí)際的大小(不受內(nèi)部子元素大小的影響衣撬，只和本身元素大小的設(shè)定有關(guān))
width + padding + border
悟：可以計(jì)算滾動(dòng)條的寬度offsetWidth - border*2 - clientWidth
# 獲取滾動(dòng)條的寬度
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窗體的內(nèi)部寬度乖订，不包括用戶界面元素，比如窗框
W3C:window.innerWidth, window.innerHeight[IE9+][只讀]
注：不包括地址欄等具练，只是顯示內(nèi)容的視口的高度
可視區(qū)域的高度
window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
clientWidth/clientHeight
[不包括滾動(dòng)條][在頁(yè)面中所占的寬度除去滾動(dòng)條的寬度]
包括padding+content
# IE
document.documentElement.clientWidth
document.documentElement.clientHeight
# IE7之前的版本
document.body.clientWidth,document.body.clientHeight
oDiv.clientLeft/oDiv.clientTop
兼容性:全兼容
左邊框的寬度乍构，上邊框的寬度
注：只能是左邊和上邊的寬度
內(nèi)容區(qū)域相對(duì)于元素左上角的位置，即border_left_width, border_top_width
oDiv.offsetLeft/oDiv.offsetTop
兼容性:全兼容
- 表示相對(duì)于最近的祖先定位元素（CSS position 屬性被設(shè)置為 relative扛点、absolute 或 fixed 的元素）的左右偏移值
- position不是static的元素
說(shuō)明:
- 返回距離父元素左邊和高度的距離
- 必須設(shè)置了定位才能計(jì)算[即offsetParent]
- 包括margin + 父元素的padding + 父元素的borderWidth[完全屬于自己的部分距離完全屬于父元素的部分]
注:offsetParent取最近的那個(gè)父級(jí)元素
- 在IE6/7中
offsetLeft = (offsetParent的padding-left) + (當(dāng)前元素的margin-left) - 在IE8/9/10及Chrome中
X offsetLeft = (offsetParent的margin-left) + (offsetParent的border寬度) + (offsetParent的padding-left) + (當(dāng)前元素的margin-left)X就是距離offsetParent邊框的 距離
oDiv.scrollLeft/oDiv.scrollTop
兼容性:[全兼容][可讀可寫]
釋義:當(dāng)元素其中的內(nèi)容超出其寬高的時(shí)候哥遮，元素被卷起的高度和寬度[指的是擁有滾動(dòng)條的元素而非子元素]
注：有滾動(dòng)條的元素的滾動(dòng)距離
eg: outer, inner，只有outer的這個(gè)屬性才有意義
jQuery部分
.position()
相對(duì)于offsetParent的當(dāng)前坐標(biāo)值
{
left:相對(duì)于offsetParent元素左側(cè)的距離陵究，
top :相對(duì)于offsetParent元素頂部的距離
}
.scrollLeft() || .scrollTop()
釋義1:相對(duì)于水平滾動(dòng)條左邊的距離眠饮，滾動(dòng)條居左或元素不能滾動(dòng)，值為0
釋義2:相對(duì)于垂直滾動(dòng)條頂部的距離铜邮，滾動(dòng)條居頂或元素不能滾動(dòng)仪召，值為0
clientX, clientY
兼容性:全兼容
釋義:相對(duì)于瀏覽器(可視區(qū)域左上角0,0)的坐標(biāo)
返回發(fā)生時(shí)鼠標(biāo)在視口中的坐標(biāo)
鼠標(biāo)相對(duì)于window的偏移
IOS上=pageX，pageY
ayerX, layerY/offsetX, offsetY
兼容性:很糟糕
返回發(fā)生時(shí)鼠標(biāo)相對(duì)于目標(biāo)對(duì)象的坐標(biāo)
Opera支持addEventListener,但不支持layerX, layerY
bug解釋：
在IE7以及以下瀏覽器下松蒜，只有當(dāng)當(dāng)前目標(biāo)元素為offsetParent是才計(jì)算坐標(biāo)值扔茅，否則，它就會(huì)拿當(dāng)前目標(biāo)元素的offsetParent來(lái)計(jì)算秸苗。還有召娜，當(dāng)發(fā)現(xiàn)元素應(yīng)用了position: relative后，IE會(huì)去尋找下一個(gè)offsetParent來(lái)計(jì)算offsetY惊楼，但又不是offsetX萤晴。是的吐句，讀兩次胁后，很蛋疼吧店读！
pageX/pageY(W3C)
兼容性:IE9+
返回的是相對(duì)于頁(yè)面的坐標(biāo)
鼠標(biāo)相對(duì)于document的坐標(biāo)
# 拖動(dòng)實(shí)例思路
# 元素必須有定位屬性
mousedown
#記錄元素左上角位置
var startLeft = layerX/offsetX
var startTop = layerY/offsetY
# mousemove
# mouseup
注：
- 可能會(huì)出現(xiàn)禁止光標(biāo),可以禁止默認(rèn)事件
- 拖動(dòng)的情況比較復(fù)雜，建議用第三方腳本
跳轉(zhuǎn)到可見區(qū)域內(nèi)
$("#logo_bbc")[0].scrollIntoView();
window.scrollTo(0, 0);
pageXOffset,pageYOffset
兼容性:IE9+
表示整個(gè)頁(yè)面滾動(dòng)的像素值（水平方向的和垂直方向的）
window.pageXOffset
window.pageYOffset
CSS-位置
- element.offsetParent 返回元素的偏移容器[元素的第一個(gè)祖先定位元素攀芯，用來(lái)計(jì)算offsetLeft屯断，offsetTop(不一定與parentNode相等)]。
注：在IE和Opera瀏覽器下侣诺，position: fixed的元素沒(méi)有offsetParent - element.offsetLeft 返回元素的水平偏移位置殖演。
- element.offsetTop 返回元素的垂直偏移位置。
- element.scrollTop 返回元素上邊緣與視圖之間的距離年鸳。[元素被隱藏的上方的距離]
- element.scrollLeft 返回元素左邊緣與視圖之間的距離趴久。
- document.documentElement.scrollTop 垂直方向滾動(dòng)的值
CSS-尺寸
- element.scrollWidth 返回元素的實(shí)際寬度。[元素內(nèi)容 + 內(nèi)邊距(包括滾動(dòng)條)]
- element.scrollHeight 返回元素的實(shí)際高度搔确。
document.body.scrollWidth document.body.scrollHeight
//給定寬高小于瀏覽器窗口
scrollWidth和scrollHeight通常是此瀏覽器窗口的寬高
//給定寬高大于瀏覽器窗口彼棍，且子元素小于給定寬高
寬高為設(shè)定的寬高+padding*2+border*2
//給定寬高大于瀏覽器窗口，且內(nèi)容大于給定寬高
寬高為子元素的寬高 +body的padding[1個(gè)]+margin[1個(gè)]+border[1個(gè)]
//[無(wú)滾動(dòng)軸時(shí)]
scrollWidth = clientWidth = style.width + style.padding * 2
//[有滾動(dòng)軸時(shí)]
scrollWidth = 實(shí)際內(nèi)容的寬度 + padding * 2
scrollHeight = 實(shí)際內(nèi)容的高度 + padding * 2
- element.clientWidth 返回元素的可見寬度膳算。[元素內(nèi)容 + 內(nèi)邊距(不包括滾動(dòng)條)]
- element.clientHeight 返回元素的可見高度座硕。
- element.offsetHeight 返回元素的高度。[元素內(nèi)容 + 內(nèi)邊距 + 邊框(不包括外邊距)]
- element.offsetWidth 返回元素的寬度涕蜂。
- element.innerWidth 返回元素內(nèi)部的寬高华匾，包括padding，不包括border
- element.outerWidth 返回元素集合中第1個(gè)元素當(dāng)前計(jì)算寬高度值机隙，包括padding蜘拉，border，選擇性的margin
window.outerWidth表示整個(gè)瀏覽器窗體的大小有鹿，包括任務(wù)欄等[IE9+] - element.outerHeight
window.outerHeight表示整個(gè)瀏覽器窗體的大小旭旭，包括地址欄，收藏欄印颤，標(biāo)簽欄您机，任務(wù)欄等[IE9+]
jQuery相關(guān)部分
.width() || .height()
只包含content的凈寬高，不包括margin,border,padding
.width()與.css('width')區(qū)別
.width()返回結(jié)果無(wú)單位
.css('width')的結(jié)果有單位
.innerWidth() || .innerHeight()
釋義:content + padding
.outerWidth() || .outerHeight()
釋義:content + padding + border
.outerWidth(true) || .outerHeight(true)
釋義:content + padding + border + margin
getBoundingClientRect
返回一個(gè)對(duì)象年局，包含top,left,right,bottom,width,height
- width际看、height 元素自身寬高
- top 元素上外邊界距窗口最上面的距離
- right 元素右外邊界距窗口最上面的距離
- bottom 元素下外邊界距窗口最上面的距離
- left 元素左外邊界距窗口最上面的距離
- width 元素自身寬(包含border,padding)
- height 元素自身高(包含border,padding)
通常認(rèn)為 <html> 元素是在 Web 瀏覽器的視口中滾動(dòng)的元素（IE6 之前版本運(yùn)行在混雜模式下時(shí)是 <body> 元素）因此，帶有垂直滾動(dòng)條的頁(yè)面總高度就是 document.documentElement.scrollHeight
// 在沒(méi)有滾動(dòng)條的情況下矢否，元素內(nèi)容的總高度
scrollHeight
// 在沒(méi)有滾動(dòng)條的情況下仲闽，元素內(nèi)容的總寬度
scrollWidth
// 被隱藏在內(nèi)容區(qū)域左側(cè)的像素?cái)?shù)。通過(guò)設(shè)置這個(gè)屬性可以改變?cè)氐臐L動(dòng)位置
scrollLeft
// 被隱藏在內(nèi)容區(qū)域上方的像素?cái)?shù)僵朗。通過(guò)設(shè)置這個(gè)屬性可以改變?cè)氐臐L動(dòng)位置
scrollTop
