一：鼠標(biāo)尺寸類樣式

都要事件對象的配合

Tip:注意與瀏覽器及元素尺寸分開，鼠標(biāo)類尺寸樣式都是X,Y，瀏覽器及元素的各項尺寸時Height,Width

創(chuàng)新互聯(lián)是一家集網(wǎng)站設(shè)計、成都網(wǎng)站制作、網(wǎng)站頁面設(shè)計、網(wǎng)站優(yōu)化SEO優(yōu)化為一體的專業(yè)網(wǎng)站設(shè)計公司，已為成都等多地近百家企業(yè)提供網(wǎng)站建設(shè)服務(wù)。追求良好的瀏覽體驗,以探求精品塑造與理念升華,設(shè)計最適合用戶的網(wǎng)站頁面。 合作只是第一步，服務(wù)才是根本,我們始終堅持講誠信，負(fù)責(zé)任的原則，為您進行細(xì)心、貼心、認(rèn)真的服務(wù),與眾多客戶在蓬勃發(fā)展的市場環(huán)境中,互促共生。

1：檢測相對于瀏覽器的位置:event.clientX/event.clientY

client:整個瀏覽器的可視區(qū)域,當(dāng)點擊鼠標(biāo)的時候，鼠標(biāo)事件發(fā)生的位置距離瀏覽器可視區(qū)域的左邊和上邊的距離
clientX:鼠標(biāo)事件發(fā)生的位置距離瀏覽器可視區(qū)域的左邊的距離
clientY:鼠標(biāo)事件發(fā)生的位置距離瀏覽器可視區(qū)域的上邊的距離

2：檢測相對于屏幕的位置event.screenX/event.screenY

screen:整個屏幕的大小，當(dāng)鼠標(biāo)點擊的時候，鼠標(biāo)事件發(fā)生的位置相對于屏幕的左邊和上邊的距離
event.screenX：鼠標(biāo)事件發(fā)生的位置距離屏幕左邊的距離
event.screenY:鼠標(biāo)事件發(fā)生的位置距離屏幕上邊的距離

3：檢測相對于事件源的位置：event.offsetX/event.offsetY

Tip：注意這個事件源的模型，offset的檢測是不包括邊框的大小的，但是包括內(nèi)邊距，如果邊框的大小為10px,那么最左邊的X的距離為-10；

offset:相對于事件源，當(dāng)鼠標(biāo)事件發(fā)生時，相對于發(fā)生事件的事件源的左邊的距離和上邊的距離
event.offsetX:當(dāng)鼠標(biāo)事件發(fā)生時，相對于發(fā)生事件的事件源的左邊的距離
event.offsetY:當(dāng)鼠標(biāo)事件發(fā)生時，相對于發(fā)生事件的事件源的上邊的距離

4:檢測相對于文檔的位置：event.pageX/event.pageY

Tip:這個文檔指的這個頁面，頁面在不發(fā)生滾動的情況下，瀏覽器的可視區(qū)域等于文檔的可視區(qū)域，這個時候event.clientX = event.offetX

一旦頁面發(fā)生了滾動，那么滾動消失的距離，page是可以檢測來的，這時候event.cientX 與 event.pageX的距離是不相等的

page:頁面文檔，當(dāng)頁面發(fā)生了滾動的，早上文檔頂部隱藏了一部分，pageX的距離還是從文檔最頂?shù)木嚯x開始檢測的
pageX:當(dāng)鼠標(biāo)事件發(fā)生時，鼠標(biāo)相對于文檔左邊的位置(IE7，8沒有)
pageY:當(dāng)鼠標(biāo)事件發(fā)生時，鼠標(biāo)相對于文檔上邊的位置(IE7，8沒有)

二：瀏覽器及元素各項尺寸

offsetParent:獲取元素的最近的具有定位屬性的父元素

1:元素.offsetWidth/元素.offsetHeight:元素的實際寬高

Tip:元素的實際寬高是包括邊框的，指的是這個元素的全部

offset：針對元素的
offsetWidth:元素的寬度
offsetHight：元素的高度

2：元素.offsetLeft/元素.offsetTop,針對具有定位屬性的父元素的左邊和上邊的距離

Tip:從邊框的邊緣開始檢測的

offset:針對元素的
offsetLeft:元素對于具有定位屬性的父元素的左邊距
offsetTop:元素對于具有定位屬性的父元素的上邊距

3：元素.clientWidth/元素.clientHeight

client：不包括元素的邊框
clientWidth:元素的可視寬度
clientHeight:元素的可視高度

4：元素.clientLeft/元素.clientTop

cilentLeft:當(dāng)前元素的左邊框的大小

clientTop:當(dāng)前元素的上邊框的大小

5：元素.scrollHeight/元素.scrollwidth

cilentLeft:當(dāng)前元素的左邊框的大小

clientTop:當(dāng)前元素的上邊框的大小

6：元素scrollTop/元素.scrollLeft

scrollTop:滾動條最頂端和可見內(nèi)容的最頂端的距離

scrollLeft:滾動條最左端和可見內(nèi)容的最左邊的距離

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

標(biāo)題名稱：web前端入門到實戰(zhàn)：JavaScript中尺寸類樣式-創(chuàng)新互聯(lián)
本文鏈接：http://weahome.cn/article/goidh.html