Js獲取寬高度的概括集錦總結

首先，先嚇唬一下咱們的小白們！在js中的描述寬高的能夠細分有22種。屬性根據不一樣的兼容性也分爲五種

 

1. window.innerWidth //除去菜單欄的窗口寬度，與瀏覽器相關
2. window.innerHeight//除去菜單欄的窗口高度，與瀏覽器相關
3. window.outerWidth//包括菜單欄的窗口寬度，與瀏覽器相關
4. window.outerHeight//包括菜單欄的窗口寬度，與瀏覽器相關
5. window.screen.height//電腦整個屏幕的高度，與瀏覽器無關
6. window.screen.width//電腦整個屏幕的寬度，與瀏覽器無關
7. window.screen.availHeight//電腦屏幕的可利用高度，不包含任務欄，與瀏覽器無關，應該是獲取window對象的屬性。
8. window.screen.availWidth//電腦屏幕的可利用寬度，不包含任務欄，與瀏覽器無關，應該是獲取window對象的屬性。
9. window.screenTop//瀏覽器距離屏幕的高度，與瀏覽器無關
10. window.screenLeft//瀏覽器距離屏幕左側的距離寬度，與瀏覽器無關
11. document.body.clientWidth//指元素的自身寬度（包括padding），網頁可見區域寬，不包括滾動條
12. document.body.clientHeight//指元素的自身的高度（包括padding），網頁可見區域高
13. document.body.clientLeft//子級div內容位置到父級內容區域的視區寬度距離(得到的是border值)
14. document.body.clientTop//子級div內容位置到父級內容區域的高度距離(得到的是border值)
15. document.body.offsetWidth//指定元素的寬度（包括padding，border和內容）,包括滾動條
16. document.body.offsetHeight//指定元素的高度（包括padding，border和內容）
17. document.body.offsetTop//距離父級元素的高度，默認是document
18. document.body.offsetLeft//距離父級元素的寬度，默認是document
19. document.body.scrollWidth//獲取的是文檔的寬度（當指定的寬度小於瀏覽器窗口的時候，爲瀏覽器的寬度）(無滾動條時會等於clientWidth)
20. document.body.scrollHeight//獲取的是文檔的高度（當指定的高度小於瀏覽器窗口的時候，爲瀏覽器的高度）(通常狀況下會等於clientHeight)
21. document.body.scrollTop//文檔被滾動上去的時候（即滾動條往上滾動的距離）
22. document.body.scrollLeft//文檔被滾動右去的時候（即滾動條往右滾動的距離）

 

 

1.與瀏覽器無關
window.innerWidth
window.outerWidth
window.screen.width
window.screen.availWidth
window.screenLeft (瀏覽器距離屏幕左側的距離寬度)

 

2.與瀏覽器有關

語法：document.documentElement.clientWidth.或者doucment.body.clientWidth.

clientWidth（距離父級元素clientLeft）

offsetWidth（距離父級元素offsetLeft）

scrollWidth（距離滾動條頂部scrollTop）

 

通常無滾動條狀況下offsetWidth=clientWidth=scrollWidth(有可能偏差1px)

IE瀏覽器兼容寫法：

　　document.body.scrollTop

　　document.body.offsetWidth

　　document.body.clientHeight

Chrome瀏覽器兼容寫法：

　　var scrolltop = document.documentElement.scrollTop   /*獲取滾動條距離頂部得距離*/

　　var clientHeight = document.documentElement.clientHeight; /*獲取頁面可視區的高度*/

　　var offset = document.documentElement.offsetWidth;　　/*獲取頁面可視區的高度，包含border*/

 

js鼠標事件綜合各大瀏覽器能獲取到座標的屬性總共如下五種：

• event.clientX/Y　　 /*相對於瀏覽器窗口*/
• event.pageX/Y　　
• event.offsetX/Y
• event.layerX/Y
• event.screenX/Y      /*相對於屏幕*/

clientX/Y

clientX/Y獲取到的是觸發點相對瀏覽器可視區域左上角距離，不隨頁面滾動而改變。
兼容性：全部瀏覽器均支持

pageX/Y

pageX/Y獲取到的是觸發點相對文檔區域左上角距離，會隨着頁面滾動而改變
兼容性：除IE6/7/8不支持外，其他瀏覽器均支持

offsetX/Y

offsetX/Y獲取到是觸發點相對被觸發dom的左上角距離，不過左上角基準點在不一樣瀏覽器中有區別，其中在IE中之內容區左上角爲基準點不包括邊框，若是觸發點在邊框上會返回負值，而chrome中以邊框左上角爲基準點。

兼容性：IE全部版本，chrome，Safari均完美支持，Firefox不支持

layerX/Y

layerX/Y獲取到的是觸發點相對被觸發dom左上角的距離，數值與offsetX/Y相同，這個變量就是firefox用來替代offsetX/Y的，基準點爲邊框左上角，可是有個條件就是，被觸發的dom須要設置爲position:relative或者position:absolute，不然會返回相對html文檔區域左上角的距離。

兼容性：IE6/7/8不支持，opera不支持，IE9/10和Chrome、Safari均支持

screenX/Y

screenX/Y獲取到的是觸發點相對顯示器屏幕左上角的距離，不隨頁面滾動而改變。
兼容性：全部瀏覽器均支持

 

                  

 

 

　　console.log(e.clientX);
}function getMouseMove(event) { var e = event || window.event;

若是想了解移動觸摸座標屬性詳細請看個人另外一篇文章