建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網營銷解決方案
web前端入門到實戰(zhàn)：JavaScript中尺寸類樣式
一：鼠標尺寸類樣式
都要事件對象的配合
Tip:注意與瀏覽器及元素尺寸分開，鼠標類尺寸樣式都是X,Y，瀏覽器及元素的各項尺寸時Height,Width
成都創(chuàng)新互聯(lián)為客戶提供專業(yè)的網站制作、成都網站制作、程序、域名、空間一條龍服務，提供基于WEB的系統(tǒng)開發(fā). 服務項目涵蓋了網頁設計、網站程序開發(fā)、WEB系統(tǒng)開發(fā)、微信二次開發(fā)、手機網站開發(fā)等網站方面業(yè)務。
1：檢測相對于瀏覽器的位置:event.clientX/event.clientY
client:整個瀏覽器的可視區(qū)域,當點擊鼠標的時候，鼠標事件發(fā)生的位置距離瀏覽器可視區(qū)域的左邊和上邊的距離
clientX:鼠標事件發(fā)生的位置距離瀏覽器可視區(qū)域的左邊的距離
clientY:鼠標事件發(fā)生的位置距離瀏覽器可視區(qū)域的上邊的距離
2：檢測相對于屏幕的位置event.screenX/event.screenY
screen:整個屏幕的大小，當鼠標點擊的時候，鼠標事件發(fā)生的位置相對于屏幕的左邊和上邊的距離
event.screenX：鼠標事件發(fā)生的位置距離屏幕左邊的距離
event.screenY:鼠標事件發(fā)生的位置距離屏幕上邊的距離
3：檢測相對于事件源的位置：event.offsetX/event.offsetY
Tip：注意這個事件源的模型，offset的檢測是不包括邊框的大小的，但是包括內邊距，如果邊框的大小為10px,那么最左邊的X的距離為-10；
offset:相對于事件源，當鼠標事件發(fā)生時，相對于發(fā)生事件的事件源的左邊的距離和上邊的距離
event.offsetX:當鼠標事件發(fā)生時，相對于發(fā)生事件的事件源的左邊的距離
event.offsetY:當鼠標事件發(fā)生時，相對于發(fā)生事件的事件源的上邊的距離
4:檢測相對于文檔的位置：event.pageX/event.pageY
Tip:這個文檔指的這個頁面，頁面在不發(fā)生滾動的情況下，瀏覽器的可視區(qū)域等于文檔的可視區(qū)域，這個時候event.clientX = event.offetX
一旦頁面發(fā)生了滾動，那么滾動消失的距離，page是可以檢測來的，這時候event.cientX 與 event.pageX的距離是不相等的
page:頁面文檔，當頁面發(fā)生了滾動的，早上文檔頂部隱藏了一部分，pageX的距離還是從文檔最頂?shù)木嚯x開始檢測的
pageX:當鼠標事件發(fā)生時，鼠標相對于文檔左邊的位置(IE7，8沒有)
pageY:當鼠標事件發(fā)生時，鼠標相對于文檔上邊的位置(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:當前元素的左邊框的大小
clientTop:當前元素的上邊框的大小
5：元素.scrollHeight/元素.scrollwidth
cilentLeft:當前元素的左邊框的大小
clientTop:當前元素的上邊框的大小
6：元素scrollTop/元素.scrollLeft
scrollTop:滾動條最頂端和可見內容的最頂端的距離
scrollLeft:滾動條最左端和可見內容的最左邊的距離本文標題：web前端入門到實戰(zhàn)：JavaScript中尺寸類樣式
網站路徑：http://fisionsoft.com.cn/article/googij.html
