正處於前端入門階段的我一直對前端中出現的innerHeight,availHeight,clientHeight,offsetLeft等與寬高有關的屬性一知半解。所以趁著清明三天短假捋清這些屬性。由於IE8以下的IE瀏覽器市場份額已逐年下降，所以對於IE瀏覽器，本文中將只考慮IE8及以上的版本，至於其他瀏覽器，也是以chrome相容為主。

與window物件相關的屬性

window物件表示瀏覽器中的整個視窗，其中涉及到整個瀏覽器視窗的大小的屬性包括innerHeight,innerWidth,pageXOffset,pageYOffset,screenX,screenY,outWidth,outHeight

與screen相關的屬性

screen相關的屬性有availWidth和availHeight、width、height。
其中availWidth表示顯示器的可用寬度，不包括工作列，width表示螢幕的寬高。這些屬性目前相容性不錯，IE8及以上都沒有問題。可以用一張圖來顯示這些屬性：

與document物件相關的屬性

在平時開發的時候，這些屬性是我們需要關注的，也是我們經常使用到的，所以我將重點放在這裡，也將詳細的講解這些屬性。

elementFromPoint()

使用該值返回的是文件上處於指定座標位置最頂層的元素，且該座標是相對於瀏覽器視窗的左上角為原點計算的，注意，傳入的座標必須鑰匙可視區域內的，如果不為可視區域的，則會返回null。該屬性在各大瀏覽器上相容性不錯。

getBoundingClientRect()

該方法用於獲取某個元素相對於視窗的位置集合。
這個屬性特別需要注意的是DOM元素到瀏覽器可視範圍的距離並不包括文檔卷起來的部分。所以為了獲取元素在頁面上的位置並且解決瀏覽器的相容性問題就可以使用如下方法：

documentScrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
documentScrollLeft = document.documentElement.scrollLeft || window.pageXOffset || document.body.scrollLeft;
X = document.querySelector("#box").getBoundingClientRect().top+documentScrollTop;
Y = document.querySelector("#box").getBoundingClientRect().left+documentScrollLeft;

在IE9及以上的IE瀏覽器中該集合包含left,top,bottom,right,height,width六個屬性，但是在IE8中，其缺少width,height，但是在IE8中可以使用如下程式碼得到width和height屬性：

height = document.getElementById("box").getBoundingClientRect().right-document.getElementById("box").getBoundingClientRect().left;
width = document.getElementById("box").getBoundingClientRect().bottom-document.getElementById("box").getBoundingClientRect().top;

其中，用一張圖片可以概括如下：

getClientRects()

getClientRects方法有些複雜，並且在非IE瀏覽器下只支援inline型別的元素，所以在此不予展開，一般使用getBoundingClientRect()即可。

scrollIntoView()

element.scrollIntoView(opt)是讓元素儘可能的滾動到可視視窗，使用這種方法可以有效替代錨點問題，且該方法相容性非常不錯，IE8及以上的IE瀏覽器可以盡情使用。其中當不填寫opt是預設與opt為true效果一樣，即element元素儘可能的滾動到可視視窗的頂部，當opt為false的時候，element元素儘可能的滾動到可視視窗的底部。opt同時還可以為Object型別，但是一般用處不多，如果想去了解opt為object型別時的情況，可以去Element.scrollIntoView()詳細瞭解該屬性。

元素相關的屬性

clientLeft和clientTop

該屬性是隻讀的，並且返回的是數值型別，clientLeft表示的是一個元素左邊框的寬度，但是如果元素內容溢位造成左邊出現滾動條，那麼clientLeft就要包括滾動條的寬度，不過這種情況非常罕見。clientTop表示元素頂部邊框的寬度。

clientWidth和clientHeight

該屬性也是隻讀的，返回數值型別，clientWidth表示的是內容區域的高度，但是不包括邊框和滾動條。當不設定box-sizing:border-box的時候，clientWidth的值為width+paddingLeft+paddingRight-左/右邊滾動條的寬度，當設定box-sizing:border-box的時候，clientWidth的值為width-borderLeft-borderRight--下邊滾動條的高度。同理clientHeight表示的是內容區域的寬度，計算與clientWidth類似。

offsetLeft和offsetTop

該屬性是隻讀的，返回數值型別，其表示相對於最近的祖先定位元素（即CSS position屬性不為static的元素）的左右偏移量，當其祖先沒有定位元素的時候，就是相當於html文件左上角的偏移量。

offsetWidth和offsetHeight

該屬性是隻讀的，返回數值型別，其返回元素的寬高，與clientWidth/clientHeight相比，其包括變寬和滾動條的寬/高。當不設定box-sizing:border-box的時候，offsetWidth的值為width+paddingLeft+paddingRight+左/右邊滾動條的寬度，當設定box-sizing:border-box的時候，offsetWidth的值為width。offsetHeight計算與offsetWidth類似。

scrollLeft和scrollTop

該屬性獲取或設定元素的內容向左滾動/向下滾動的畫素數，可讀可寫，其返回/設定數值型別。當滾動條是在右邊的時候，則scrollLeft為0。
scrollLeft也可以設定為任何整數，但是當元素沒有滾動條的時候或者設定整數小於0的時候，scrollLeft設定為0；當設定大於可滾動內容的最大值的值，scrollLeft設定為最大值。

與滑鼠相關的屬性

clientX/clientY

其表示的是滑鼠相對於window不包括工作列在內內部視窗的偏移量。

offsetX/offsetY

其表示滑鼠相對於被點選元素的的border左上角開始的座標，該屬性在IE中相容性不錯，但是在一些舊版本的火狐瀏覽器中沒有該屬性。並且不同瀏覽器左上角的基準點不同，對於offsetX而言，在IE瀏覽器中，以內容區左上角為基準點並不包括邊框，如果點選點在左邊框的話，其會返回負值，而在chrome上是以變寬左上角為基準點。所以，為了相容火狐瀏覽器和IE瀏覽器，可以使用以下程式碼來實現獲取offsetX/offsetY，這兩個值預設以chrome的標準為主;

    function getOffsetX(e){
        var e =e||window.e;
        var targetObj = e.target || e.srcElement;
        var rect = targetObj.getBoundingClientRect();
        var clientx = e.clientX;
        return clientx - rect.left;
    }
    function getOffsetY(e){
        var e = e || window.event;
        var targetObj = e.target || e.srcElement;
        var rect = targetObj.getBoundingClientRect()；
        var clientY = e.clientY;
        return clientY - rect.top;
    }

pageX/pageY

該屬性為滑鼠相對於document的座標，其會隨著頁面滾動而改變，該屬性為只讀屬性，且不相容IE8。

screenX/screenY

該屬性為滑鼠相對於顯示屏螢幕的偏移座標，其相容性不錯。

x/y

該屬性相當於clientX/clientY,但是對於一些舊版本的火狐並不相容，所以可以不使用這個。

layerX/layerY

其獲取的是觸發點相對於被點選元素的距離，數值與offsetX/offsetY相同，其有很大的限制就是點選元素要設定為position:relative或absolute才行，所以一般不使用該屬性。

花了三四天的業餘時間將這些屬性進行歸納總結，有些像style.height這樣的屬性因為篇幅的原因所以並沒有放進本篇中。如果本文出現錯誤，懇請指出，不勝感激。