JavaScript中的各類寬高總結

window和document
首先咱們來高清兩個概念：
    window和document的區別是什麼？
    window.location和document.location是同樣嗎？
第一個問題：
    Window對象表示瀏覽器中打開的窗口；window對象能夠省略。好比alert()、window.alert()。
    Document對象是Window對象的一部分。那麼document.body 咱們能夠寫成window.document.body；瀏覽器的HTML文檔成爲Document對象。
第二問題：
window對象的location屬性引用的是Location對象，表示該窗口中當前顯示文檔的URL。
document的對象的location屬性也是引用了Location對象。
那意思是：

1 window.location === document.location;  //true

在一般狀況下同樣，frame也是同樣

與window相關的寬高介紹：
與window相關的寬高有一下幾個：
    window.innerWidth，經過字面意思咱們知道這是一個內部的寬度
    window.innerHeight，內部的高度
    window.outWidth，外部的寬度
    window.outHeight，外部的高度
window.innerHeight和window.outHeight


我發如今Windows 10下Chrome和360安全瀏覽器不同、、、、（後面代碼測試部分）
window.innerWidth和window.outWidth


掛靠在window下的寬高還有window.screen， window.screen包含有關用戶屏幕的信息。它包括：

• window.screen.width
• window.screen.height
• window.screen.availHeight
• window.screen.availWidth
• window.screenTop
• window.screenLeft

圖解



window相關寬高代碼演示
演示代碼：

1 console.log("innerWidth=",innerWidth);
2 console.log("innerHeight=",innerHeight);
3 console.log("outerWidth=",outerWidth);
4 console.log("outerHeight=",outerHeight);

Chrome瀏覽器下效果

代碼：

1 console.info("screen.width=",screen.width);
2 console.info("screen.height=",screen.height);
3 console.info("screen.availWidth=",screen.availWidth);
4 console.info("screen.availHeight=",screen.availHeight);

在Chrome瀏覽器下效果

window相關寬高瀏覽器兼容問題

innerHeight和outerHeight是不支持IE9如下版本的，而screen系列則不存在兼容問題。

document下面client相關寬高介紹
docment下有三類屬性：
    1.與client相關的寬高
   2. 與offset相關的寬高
    3.與scroll相關的寬高

與client相關的寬高
與client相關的寬高又有以下幾個屬性：
    1.document.body.clientWidth
    2.document.body.clientHeight
    3.document.body.clientLeft
    4.document.body.clientTop

clientWidth和clientHeight
該屬性指的是元素的可視部分寬度和高度，即padding+contenr。
若是沒有滾動條，即爲元素設定的高度和寬度。
若是出現滾動條，滾動條會遮蓋元素的寬高，那麼該屬性就是其原本寬高減去滾動條的寬高。

咱們來看以下代碼：

 1 body{
 2      border: 20px solid #000;
 3      margin: 10px;
 4      padding: 40px;
 5      background: #eee;
 6      height: 350px;
 7      width: 500px;
 8      overflow: scroll;
 9 }
10 
11 console.log(document.body.clientHeight);    //430（padding*2+height）
12 console.log(document.body.clientWidth);     //580（padding*2+width）

咱們再看下面的代碼：

1 #mydiv{
2       width: 200px;
3       height: 200px;
4       background: red;
5       border: 1px solid #000;
6       overflow: auto;
7 }

在DIV中添加文字知道出現滾動軸，這時候

1 var mydiv = document.getElementById("mydiv");
2 console.log("mydiv.clientHeight=",mydiv.clientHeight);    // 200
3 console.log("mydiv.clientWidth=",mydiv.clientWidth);      // 183（減去了滾動條的寬度）

而在Mac系統下，滾動條不佔高度，這時候client的寬度仍是200.

總結

• 假入無padding無滾動條，clientWidth=style.width
• 假若有padding無滾動軸，clientWidth=style.width+style.padding*2
• 假若有padding有滾動，且滾動是顯示的，clientWidth=style.width+style.padding*2-滾動軸寬度

clientLeft和clientTop
這兩個返回的是元素周圍邊框的厚度，若是不指定一個邊框或者不定位該元素，他的值就是0.

咱們仍是以body爲例：

 1 body{
 2      border: 20px solid #000;
 3      margin: 10px;
 4      padding: 40px;
 5      background: #eee;
 6      height: 350px;
 7      width: 500px;
 8      overflow: scroll;
 9 }
10 
11 console.log(document.body.clientLeft);    //20
12 console.log(document.body.clientTop);    //20

這一對屬性是用來讀取元素的body的寬度和高度的

    clientTop=border-top的border-width
    clientLeft=border-left的border-width

與offset相關寬高介紹

與offset相關的寬高又有以下幾個屬性：

• document.body.offsetWidth
• document.body.offsetHeight
• document.offsetLeft
• document.offsetTop

offsetWidth與offsetHeight
這一對屬性指的是元素的border+padding+content的寬度和高度。
該屬性和其內部的內容是否超出元素大小無關，只和原本設定的border以及width和height有關。
咱們仍是以body爲例：

 1 body{
 2      border: 20px solid #000;
 3      margin: 10px;
 4      padding: 40px;
 5      background: #eee;
 6      height: 350px;
 7      width: 500px;
 8      overflow: scroll;
 9 }
10 
11 console.log("offsetWidth=",document.body.offsetWidth);
12 //620（width+margin*2+padding*2+border*2）
13 console.log("offsetHeight=",document.body.offsetHeight);    
14 //470（width+margin*2+padding*2+border*2）

總結
    假如無padding無滾動條無border：
        offsetWidth=clientWidth=style.width
    假若有padding無滾動條有border：
        offsetWidth=style.width+style.padding2+(border-width)2
        offsetWidth=clientWidth+border寬度*2
    假若有padding有滾動條，且滾動條是顯示的，有border：
        offsetWidth=style.width+style.padding2+(border-width)2
        offsetWidth=clientWidth+滾動條寬度+border寬度*2

offsetLeft和offsetTop
這兩個屬性是基於offsetParent的，瞭解這兩個屬性咱們必須先了解它，什麼是offsetParent呢？
    若是當前元素的父級元素沒有進行CSS定位（position爲absolute或relative）,offsetParent爲border.
    假如當前元素的父級元素中有CSS定位，offsetParent取最近的那個父級元素。

在IE6/7中：
offsetLeft=(offsetParent的padding-left)+(當前元素的margin-left)

在IE8/9/10及Chrome中：
offsetLeft=(offsetParent的margin-left)+(offsetParent的border寬度)+(offsetParentd的padding-left)+(當前元素的margin-left)

在FireFox中：
offsetLeft=(offsetParent的margin-left)+(當前元素的margin-left)+(offsetParent的padding-left)

CSS:

 1 body{
 2     border: 20px solid #000;
 3     margin: 10px;
 4     padding: 40px;
 5     background: #eee;
 6     height: 350px;
 7     width: 500px;
 8 }
 9 #mydiv{
10     width: 400px;
11     height: 200px;
12     padding: 20px;
13     margin :10px;
14     background: #f60;
15     border: 20px solid #888;
16 }

在IE8/910及Chrome中
mydiv.offsetLeft = 80
mydiv.offsetTop = 80

在火狐中
mydiv.offsetLeft = 60
mydiv.offsetTop = 60

在IE低版本IE6/7中是
mydiv.offsetLeft = 50
mydiv.offsetTop = 50
與scroll相關寬高介紹

與scroll相關的寬高屬性有以下幾個：
    document.body.scrollWidth
    document.body.scrollHeight
    document.body.scrollLeft
    document.body.scrollTop

scrollWidth和scrollHeight
document.body的scrollWidth和scrollHeight與div的scrollWidth和scrollHeight是有區別的。
咱們先來看看document.body的scrollWidth和scrollHeight：

    給定寬高小於瀏覽器窗口
        scrollWidth一般是瀏覽器窗口的寬度
        scrollHeight一般是瀏覽器窗口的高度
    給定寬高大於瀏覽器窗口，且內容小於給定寬高
        scrollWidth給定的寬度+其全部padding、margin和border
        scrollHeight給定的高度+其全部的padding、margin和border
    給定寬高大於瀏覽器窗口，且內容大於給定寬高
        scrollWidth內容寬度+其全部的padding、margin和border
        scrollHeight內容高度+其全部的padding、margin和border

再來看看在某div中scrollWidth和scrollHeight：
    在無滾動軸的時候：
    scrollWidth==clientWidth=style.width+style.padding*2

    在有滾動軸的時候：
    scrollWidth==實際內容的寬度+padding2
    scrollHeight==實際內容的高度+padding2

scrollLeft和scrollTop
這對屬性是可讀寫（可被從新賦值） 的，指的是當元素其中的內容超出其寬高的時候，元素被捲起來的高和寬度。
obj.style.width和obj.style.height
對於一個dom元素，它的style屬性返回的是一個對象，這個對象中的任意一個屬性是可讀寫的，style.width等於CSS屬性中的寬度style.height等於CSS屬性中的高度。

Event對象的5種座標  哪五種座標？    clientX和clientY，相對於瀏覽器（但是區左上角0,0）的座標    screenX和screenY，相對於設備屏幕左上角（0,0）的座標    offsetX和offsetY，相對於事件源左上角（0,0）的座標    pageX和pageY，相對於整個網頁左上角（0,0）的座標    X和Y，原本是IE屬性，相對於用CSS動態定位的最內層包容元素