一、獲取窗口的寬高
- Window視圖屬性。
window.innerWidth：窗口的內(nèi)部寬度，不包括用戶界面元素，比如窗框。window.innerHeight：窗口的內(nèi)部高度。IE8以下不兼容。 - Document文檔視圖。
document.documentElement.clientWidth：瀏覽器窗口可視寬度。document.documentElement.clientHeight：瀏覽器窗口可視高度。跟文檔相關(guān)的，滾動(dòng)條不屬于文檔內(nèi)容（滾動(dòng)條屬于瀏覽器，屬于窗口內(nèi)容）
二、元素視圖屬性
- 可視區(qū)域的寬高。
ele.clientWidth：width+padding。ele.clientHeight：height+padding。不包含子元素。 - 盒子整體的寬高。
ele.offsetWidth：width+padding+border。ele.offsetHeight：height+padding+border。不包含子元素。 - 盒子的實(shí)際寬高。
ele.scrollWidth(自定義滾動(dòng)條)：paddingLeft+width+超出部分。ele.scrollHeight(自定義滾動(dòng)條)：padding+height+超出部分。 - 左值和上值。
ele.clientLeft：內(nèi)容區(qū)到盒子最左邊的距離（實(shí)際上是左邊框的寬度）。ele.clientTop：內(nèi)容區(qū)到盒子最上邊的距離（實(shí)際上是上邊框的寬度）。ele.offsetParent：最近的定位父級(jí)。ele.offsetLeft：獲取元素距離最近的定位父級(jí)的左邊距離。ele.offsetTop：獲取元素距離最近的定位父級(jí)的上邊距離。 - 滾動(dòng)寬，滾動(dòng)高。
ele.scrollLeft：水平滾動(dòng)條的值。ele.scrollTop：垂直滾動(dòng)條的值?？勺x可寫(xiě)，有內(nèi)容溢出元素才有效果。設(shè)置時(shí)不能給px 單位，否則會(huì)出錯(cuò)。document.documentElement.scrollLeft：文檔水平滾動(dòng)條。document.documentElement.scrollTop：文檔垂直滾動(dòng)條。
三、元素方法
-
ele.getBoundingClientRect()：得到矩形元素的界線，返回的是一個(gè)對(duì)象，包含 top, left, right, bottom四個(gè)屬性值，大小都是相對(duì)于瀏覽器窗口top,left 的距離。 -
ele.scrollIntoView()：讓元素滾動(dòng)到可視區(qū)域（HTML5標(biāo)準(zhǔn)),參數(shù) true 與瀏覽器對(duì)齊，false元素在窗口居中顯示。 -
e.clientX、e.clientY：相對(duì)于window，為鼠標(biāo)相對(duì)于瀏覽器窗口的偏移 。event.clientX鼠標(biāo)在文檔的水平坐標(biāo)。event.clientY 鼠標(biāo)在文檔的垂直坐標(biāo)。
document.onmousemove = function (e) {
console.log(e.clientX,e.clientY)
}
