### 一、 client系列 * 1、`clientWidth`和`clientHeight` >表示可視區域的高度（其中只有`padding`包含在里面，其他的`border`、`margin`、滾動條都不包含） >存在垂直滾動條: >``` >contentWidth + padding - scollbarWidth >``` >不存在滾動條: >``` >contentWidth + padding >```  * 2、`clientTop`和`clientLeft` >表示邊框的寬度，指的是`border`,有滾動條就包含滾動條 ``` scrollbarWidth = (content width + paddingLeftWidth + paddingRightWidth) - clientWidth ```  `client`相關代碼 ``` Document div?{ width:?300px; height:?200px; border:?10pxsolidrebeccapurple; background-color:?royalblue; padding:?20px; margin:?100px; ????} ????fjaskdfl;jasdffaklsdhdklashfklsda ????hfaskdhfksldafhksadjfhskadfjads ????hfsakjfaslfjsdakfhasfjkhsdjfhsakfl ????jahsalfadsfhjladsfhasdkfjhdsafa vardoms\=?document.getElementsByTagName('div')\[0\] console.log(doms.clientWidth) //?clientWidth:表示padding加自己的content長度（不包含scroll的長度） console.log(doms.clientHeight) //指的就是border console.log(doms.clientLeft)? console.log(doms.clientTop) ``` ### 二、 offset系列 * 1、`offsetWidth`和`offsetHeight` >包括padding、border、水平滾動條，但不包括margin的元素的高度  * 2、`offsetTop`和`offsetLeft` >表示當前元素距離最近父元素邊框的距離,和有沒有滾動條沒有關系 情況一：當父元素都沒有設置position時： （1）、在Chrome，opera和IE瀏覽器中offsetLeft是元素邊框外側到瀏覽器窗口內側的距離且body.offsetLeft=0  （2）、在firefox瀏覽器中offsetLeft是元素邊框外側到body內側的距離body.offsetLeft=-邊框寬度  情況二：如果父元素是body且body設置了position屬性： (1）、在Chrome和opera瀏覽器中offsetLeft是元素邊框外側到body邊框外側的距離  (2)、在IE和fireForx瀏覽器中offsetLeft是元素邊框外側到body邊框內側的距離  情況三：如果父元素不是body元素且設置了position屬性時： offsetLeft為元素邊框外側到父元素邊框內側的距離（各瀏覽器情況一致）  * 3、`offsetParent` >offsetParent定義：那么offsetParent就是距離該子元素最近的進行過定位的父元素（position：absolute ?relative fixed），如果其父元素中不存在定位則offsetParent為：body元素 根據定義分別存在以下幾種情況 * 【1】元素自身有fixed定位，父元素不存在定位，則offsetParent的結果為null（firefox中為：body，其他瀏覽器返回為null） * 【2】元素自身無fixed定位，且父元素也不存在定位，offsetParent為元素 * 【3】元素自身無fixed定位，且父元素存在定位，offsetParent為離自身最近且經過定位的父元素 * 【4】元素的offsetParent是null `offset`相關代碼： ``` Document body?{ position:?relative; padding:?0; margin:?10px; border:?10pxsolidblueviolet; ????} div?{ width:?300px; height:?200px; border:?10pxsolidrebeccapurple; padding:?20px; margin:?100px; ????} ????fjaskdfl;jasdffaklsdhdklashfkl ????hfaskdhfksldafhksadjfhskadfjads ????hfsakjfaslfjsdakfhasfjkhsdjfhs ????jahsalfadsfhjladsfhasdkfjhdsafa ????hasdfhjshaoyouqingjiangxinongye ????shaoyouqingjiangxinongyedaxuen ????zuiniubiderenwu,ninzhidaomabaob vardoms\=?document.getElementsByTagName('div')\[0\] console.log(doms.offsetWidth) //?offsetWidth:表示padding加自己的content長度還有border的寬度 console.log(doms.offsetHeight) //offsetTop相對的是父級帶position部分的偏移量 console.log(doms.offsetTop)? console.log(doms.offsetLeft) //?offsetParent：自己的父節點 console.log(doms.offsetParent) ``` ### 三、 scroll系列 * scrollWidth>clientWidth形成橫線滾輪 * scrollHeight>clientHeight形成縱線滾輪![]  * 1、`scrollWidth`和`scrollHeight` >表示可滾動區域的寬高 * 2、`scrollTop`和`scrollLeft` >表示在滾動區域滾動的距離 * 3、`scrollTo(xnum, ynum)`和`scrollBy(xnum, ynum)` `scrollTo`的參照物相對的是（0， 0）,但是scrollBy相對的是自身的位置進行偏移 >表示滾動到指定的x和y的距離 `scroll`系列代碼： Document body?{ padding:?0; margin:?0; ????} div?{ width:?300px; height:?200px; border:?10pxsolidrebeccapurple; padding:?20px; margin:?100px; overflow:?scroll; ????} ????fjaskdfl;jasdffaklsdhdklashfklssssssssssssssss ????hfaskdhfksldafhksadjfhskadfjadsssssssss ????hfsakjfaslfjsdakfhasfjkhsdjfhsfdasssssssssss ????jahsalfadsfhjladsfhasdkfjhdsafaasdfffffff ????hasdfhjshaoyouqingjiangxinongyefffffffffffffffffff ????shaoyouqingjiangxinongyedaxuenssssssssssssssss ????zuiniubiderenwu,ninzhidaomabaobssssssssssssssssss ????fjaskdfl;jasdffaklsdhdklashfklssssssssssssssssssssssss ????hfaskdhfksldafhksadjfhskadfjadsssssssss ????jahsalfadsfhjladsfhasdkfjhdsafassssssssssssssssssssss ????hasdfhjshaoyouqingjiangxinongyesssssssssssdss ????shaoyouqingjiangxinongyedaxuen ????zuiniubiderenwu,ninzhidaomabaob vardoms\=?document.getElementsByTagName('div')\[0\] console.log(doms.scrollWidth) //?scrollWidth:表示整個可以滾動的區域的寬度 console.log(doms.scrollHeight) doms.onscroll?=?function()?{ //?scrollLeft：表示的是相對于本次滾動的原點的偏移量 console.log(doms.scrollLeft)? console.log(doms.scrollTop) ????} doms.scrollTo(10,?10) //?scrollTo：表示滾動到指定的px位置 setTimeout(function()?{ //?scrollBy：表示的相對自身再滾動的距離 doms.scrollBy(10,10) ????},?1000)