我們在日常web前端開發過程中，會經常用到各種尺寸和位置。通常是js做動畫的時候。輪播圖，滾屏動畫，粒子，碰撞檢測，拖拽，滾動加載等等。這里我將常用的尺寸和位置的獲取進行總結，不包括canvas，SVG。
在web頁面開發中，尺寸和位置分為屏幕的尺寸和位置，元素的尺寸和位置，還有一個是文檔的尺寸和位置，不過文檔的尺寸和位置是通過document.body獲取的，也算是一個元素。還有鼠標的位置。所以尺寸和位置主要分為三類：
- 屏幕尺寸和位置
- 元素尺寸和位置
- 特殊的元素，文檔的尺寸和位置
- 鼠標的位置（事件觸發的時候才能夠獲取到）
以下是相關的尺寸和位置的獲取方法。單位都是像素值。
1.屏幕的尺寸和位置，通過screen對象獲取；
screen === window.screen;//true; screen.width;//屏幕的像素寬度 screen.height;//屏幕的像素高度 screen.availHeight;//屏幕的可用高度，Windows系統下，通常是去除任務欄的高度值 screen.availWidth;//屏幕的可用寬度，Windows系統下，通常是去除任務欄寬度值 screen.availLeft;//屏幕的最左邊相對於主屏幕最左邊的偏移值 screen.availTop;//屏幕的最頂邊相對於主屏幕最頂邊的偏移值
這里需要說一下可用高度，寬度，以及偏移值。
可用高度和寬度的值，在chrome瀏覽器下（版本：54.0.2840.99 ）並不是實時獲取的，不知道以后的版本會不會出現變動。也就是說，當打開了chrome瀏覽器后，屏幕可用寬度或者可用高度就已經確定了。此時調整任務欄的位置，高度，寬度等，都影響不到這兩個值（screen.availWidth,screen.availHeight）,除非改變屏幕的分辨率，或者重啟瀏覽器。而Firefox中，屏幕相關的所有信息都是實時獲取的。
關於偏移值（availLeft和availTop），這兩個值，在單屏幕的時候，都是0，只有在有擴展屏的情況下，擴展屏中的瀏覽器中的screen對象才有非0的值，這個值就是擴展屏相對於主屏幕的偏移值。
2.元素的尺寸和位置
元素的位置
頁面中所有的元素都有基本的屬性，其中有些基本屬性與元素的位置和尺寸相關。元素位置相關的屬性，都是相對位置，即元素相對於其偏移容器（offsetParent）的偏移量
1 var ele = document.getElementById("element");//獲取某一個元素 2 ele.offsetParent;//獲取偏移容器 3 ele.offsetLeft;//元素相對與偏移容器的左邊的偏移量 4 ele.offsetTop;//元素相對於偏移容器的頂邊的偏移量 5 6 ele.clientLeft;//通常情況下是元素盒子的左邊框的寬度 7 ele.clientTop;//通常情況下是元素盒子的頂邊框的寬度 8 9 ele.scrollLeft;//橫向滾動條相對於滾動區域寬度(scrollWidth)的位置【滾動條的位置】 10 ele.scrollTop;//縱向滾動條相對於滾動區域高度(scrollHeight)的位置【滾動條的位置】 11 12 ele.scrollLeft = 30;//設置內容區域滾動到30的位置 13 ele.scrollTop = 50;//設置內容區域滾動到50的位置
對於offsetLeft和offsetTop這兩個值，是相對於偏移容器的。有兩種情況：
1.元素是通過position定位的；
2.元素是通過float或者margin定位的；
第一種情況下，offsetLeft和offsetTop的值，是left值和top值。
第二種情況下，offsetLeft和offsetTop的值，是margin-left和margin-top的值。
clientLeft:表示一個元素的左邊框的寬度，以像素表示。如果元素的文本內容方向是從右向左，並且元素內容有溢出，比如，<div dir="rtl">hello</div>，這樣會在左邊產生一個滾動條。clientLeft就會包含滾動條的寬度，即是滾動條和邊框的寬度之和。
clientTop：表示一個元素的頂部邊框的寬度。
scrollLeft:表示滾動條到元素左邊的距離，可以用來設置內容區域滾動到某一位置，也可以獲取當前滾動條的位置
scrollTop:表示滾動條到頂邊的距離，可以用來設置內容區域滾動到某一位置，也可以獲取當前滾動條的位置。
元素的尺寸
1 ele.offsetWidth;//元素盒子的尺寸，包括content,padding，border，不包括margin和滾動條的尺寸 2 ele.offsetHeight; 3 4 ele.clientWidth;//元素內容區域的尺寸，包括padding,content的尺寸，不包括border，margin和滾動條的尺寸 5 ele.clientHeight; 6 7 ele.scrollWidth;//元素自身區域的元素和內容區域的真實的尺寸的總和（自身padding+內容區域padding,margin,border,scrollbar） 8 ele.scrollHeight;
3.頁面的尺寸和位置----特殊的元素：document.body
通常情況下，我們只需要獲取到頁面的尺寸即可，頁面的位置在實際開發中基本上用不上。我們獲取頁面的尺寸也是和元素獲取尺寸時候一樣，通過上面幾個屬性值獲取。
我們是通過頁面中的body元素獲取到頁面的尺寸的。
1 //獲取到頁面的body元素 2 var body = document.body;//方法1 3 var body = document.getElementsByTagName("body")[0];//方法2 4 //還有其它方法獲取到body元素，document.getElementById等，
獲取頁面的尺寸
1 //頁面的尺寸 2 document.body.clientWidth; 3 document.body.clientHeight; 4 5 document.body.offsetWidth; 6 document.body.offsetHeight; 7 8 document.body.scrollWidth; 9 document.body.scrollHeight; 10 11 //頁面的位置 12 document.body.clientLeft; 13 document.body.clientTop; 14 15 document.body.offsetLeft; 16 document.bodyl.offsetTop; 17 18 document.body.scrollLeft; 19 document.body.scrollTop;
4.在鼠標事件中獲取到鼠標的位置
鼠標的位置只有在鼠標事件中才可以獲取到。【onclick,onmousemove,onmousedown,onmouseenter,onmouseleave,onmouseover,onmouseout】,事件發生時候，event對象有一些屬性值是和鼠標位置相關的。
clientX,clientY;是鼠標相對於瀏覽器客戶區的位置，不包括瀏覽器的地址欄，書簽欄，底部狀態欄等瀏覽器特性，只是文檔顯示區域。永遠為正值
pageX,pageY;是鼠標相對於文檔的位置，即相對於document的位置。pageX,pageY和clientX,clientY和body的寬度無關。如果頁面沒有滾動的話，二者的值相等。永遠為正值。
screenX,screenY;是鼠標相對於主屏幕的位置。存在負值，這就要看擴展屏幕的設置了。
1 document.body.addEventListener("click",function(event){ 2 console.log("相對於瀏覽器客戶區的位置X:",event.clientX); 3 console.log("相對於瀏覽器客戶區的位置Y:",event.clientY); 4 5 console.log("相對於頁面的位置X:",event.clientX); 6 console.log("相對於頁面的位置Y:",event.clientY); 7 8 console.log("相對於主屏幕的位置X:",event.clientX); 9 console.log("相對於主屏幕的位置Y:",event.clientY); 10 });
5.關於css中設置的width和height；
css中關於元素的尺寸的設置，width和height，只是設置元素的內容區域的尺寸。如果元素還有margin,padding,border的話，元素真實占用的頁面尺寸會比width和height所設置的要大。
更多關於元素尺寸的信息，我會在關於盒子模型的文章中做詳細的介紹。
6.jQuery中的尺寸和位置
jQuery中的尺寸：width()和height()
獲取jQuery對象的寬度和高度，可以通過width()和height()，這二者獲取到的是元素通過css設置的width和height，不包括元素的內邊距，邊框和外邊距。
width()和height()不僅可以獲取元素的尺寸，也可以設置元素的尺寸
$("#ele").width();//獲取元素的寬度
$("#ele").height();//獲取元素的高度
$("#ele").width(300);//設置元素的寬度
$("#ele").height(200);//設置元素的高度
innerWidth()和innerHeight()
這兩個方法可以獲取到元素的尺寸，包括內邊距
outerWidth()和outerHeight()
這兩個方法可以獲取到元素的尺寸，包括內邊距和邊框
$("#ele").innerWidth();
$("#ele").innerHeight();
$("#ele").outerWidth();
$("#ele").outerHeight();
jquery中元素的位置：
offset()
position()
jQuery對象有了兩個關於元素的位置的方法，offset()和position()，這兩個方法都返回兩個屬性值，top和left。這兩個方法都是只對可見元素有效。
offset()方法是返回元素相對於文檔的偏移位置。
position()方法是返回元素相對於父元素的偏移位置。
$("#ele").offset().left;
$("#ele").offset().top;
$("#ele").position().left;
$("#ele").position().top;
jQuery中關於滾動條的位置
scrollTop()和scrollLeft()，這兩個方法既可以獲取當前滾動條的位置也可以設置滾動條的位置。
//有溢出區域的元素滾動條的位置 $("#ele").scrollTop();//返回當前滾動條的位置 $("#ele").scrollLeft();//返回當前滾動條的位置 $("#ele").scrollTop(200);//設置滾動條的位置 $("#ele").scrollLeft(200);//設置滾動條的位置 //頁面滾動條的位置 $("body").scrollTop();//返回當前頁面滾動條的位置 $("body").scrollLeft();//返回當前頁面滾動條的位置 $("body").scrollTop(300);//將當前頁面滾動到300的位置 $("body").scrollLeft(300);//將橫向滾動條滾動到300的位置
以上的總結只是針對我們在日常web開發中與dom相關的一些尺寸和位置的介紹。但是在前端開發中，我們也有可能針對canvas和SVG做一些開發，canvas和SVG中的尺寸和位置與dom中的尺寸位置有所不同。
大家周末愉快。