js獲取各種寬高
1.窗口和瀏覽器
window.innerWidth、window.innerHeight 瀏覽器內部可用寬高
window.outerWidth、window.outerHeight 瀏覽器整體寬高
window.screenTop(Firefox采用screenX) 瀏覽器左上角距離屏幕頂端的距離(IE、Opera、Chrome中如果緊貼屏幕頂部的話，則Top為瀏覽器工具欄的高度，而Firefox則為0)
window.screenLeft((Firefox采用screenY) 瀏覽器左上角距離屏幕左邊的距離
window.screen.width、window.screen.height(屏幕分辨率)
window.screen.availWidth/availHeight(屏幕可用工作區的寬高)
2. document下面寬高
clientWidth/clientHeight：
元素的可視部分寬度和高度，即padding+content
如果沒有滾動條，即為元素設定的寬高
有滾動條，本來寬高-滾動條的寬高
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .one{ width: 200px; height: 200px; background: red; border: 1px solid #000000; overflow: auto; } </style> </head> <body> <div class="one"> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> javascript高級應用<br> </div> <script> window.onload=function(){ var oDiv=document.getElementsByTagName(‘div‘)[0]; console.log(oDiv.clientWidth+":"+oDiv.clientHeight); } </script> </body> </html>
因為有縱向滾動條，所以clientWidth=200-滾動條所占寬度
clientTop、clientLeft：
元素的border的寬度(分別是上方邊框寬，左側邊框宙)
scrollHeight和scrollWidth：
顧名思義，這兩個屬性指的是當元素內部的內容超出其寬度和高度的時候，元素內部內容的實際寬度和高度。
分body和div兩種：
div：
1.無滾動軸
scrollWidth = clientWidth = width + padding*2
2.有滾動軸(不包括滾動軸)
scrollWidth = 實際內容寬度(包含可滾動部分，容器本身做了寬高限制) + padding*2
scrollHeight = 實際內容高度(包含可滾動部分，容器本身做了寬高限制) + padding*2
body
1.無滾動軸：
1.寬高小於瀏覽器窗口：瀏覽器窗口的寬高(不同的瀏覽器有不同的處理，取clientWidth和scrollWidth中較大的一個)
2.寬高大小瀏覽器窗口：內容的實際高度+padding+margin
2.有滾動軸：內容的實際高度+padding+margin
scrollTop和scrollLeft
屬性可讀寫，指的是當元素其中的內容超出其寬高的時候，元素被卷起的高度和寬度
offsetWidth和offsetHeight
這一對屬性指的是元素的border+padding+content的寬度和高度，該屬性和其內部的內容是否超出元素大小無關，只和本來設定的border以及width和height有關
offsetLeft和offsetTop
說到這對屬性就需要說下offsetParent,所謂offsetParent指的是當前元素的離自己最近的具有定位的（position:absolute或者position：relative）父級元素（不僅僅指的是直接父級元素，只要是它的父元素都可以），該父級元素就是當前元素的offsetParent，如果從該元素向上尋找，找不到這樣一個父級元素，那麽當前元素的offsetParent就是body元素。而offsetLeft和offsetTop指的是當前元素，相對於其offsetParent左邊距離和上邊距離，即當前元素的border到包含它的offsetParent的border的距離如下所示：
獲取網頁的寬高時，需要采用采用document.compatMode用來判斷當前瀏覽器采用的渲染方式
BackCompat：標準兼容模式關閉。
CSS1Compat：標準兼容模式開啟。
當document.compatMode等於BackCompat時，使用document.body.xxx；
當document.compatMode等於CSS1Compat時，使用document.documentElement.xxx。
具體的應用可參考《用Javascript獲取頁面元素的位置》
3.Event的位置
clientX和clientY
鼠標點擊位置相對於瀏覽器（可視區）的坐標（0,0），計算鼠標點擊位置距離其左上角的位置，不管瀏覽器窗口大小如何變化，都不會影響點擊位置的坐標
pageX和pageY
鼠標點擊位置相對於頁面的位置，通常瀏覽器窗口沒有出現滾動條時，該屬性和event.clientX及event.clientY是等價的，但是當瀏覽器出現滾動條的時候，pageX通常會大於clientX
screenX和screenY
鼠標點擊位置相對於屏幕的坐標
offsetX和offsetY
鼠標點擊位置相對於容器左上角為起點的坐標，唯獨Firefox不支持該屬性，Firefox中與此屬性相對應的概念是，event.layerX和event.layerY
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .one{ width: 200px; height: 200px; background: red; border: 1px solid #000000; overflow: auto; } /* body{ height: 5000px; } */ </style> </head> <body> <div class="one" id="one"> </div> <script> document.getElementById("one").onclick=function(e){ console.log(e.offsetX); } </script> </body> </html
點擊div左上角時，x的值很小，點擊右下角時x的值很大
js獲取各種寬高