關於height、offsetheight、clientheight、scrollheight、innerheight、outerheight的區別一覽

    平時，不管在pc端頁面還是移動端頁面，因為我們一般很少會設置某個塊的的高度，但是呢，我有時候有需要取到這些高度以便於我們方便進行判斷和下一步的編寫。一般這個時候我都是直接的獲取一個塊的高度.height()，來解決，但是有的時候我翻翻查查發現還有offsetheight，而這兩者之間還是有一些差別的。下面都以高度來說，詳細的區別在取某塊或某元素高度的時候，這些height、offsetheight、clientheight、scrollheight、innerheight、outerheight的不同的地方。

$(function(){
        var h1=$("#box").height();
        var h2=document.getElementById("box2").offsetHeight; 
        var h3=document.getElementById("box3").clientHeight;
        var h4=document.getElementById("box4").scrollHeight; 
        var h5=$("#box5").innerHeight();
        var h6=$("#box6").outerHeight();
        document.getElementById("box").innerHTML=h1;
        document.getElementById("box2").innerHTML=h2;
        document.getElementById("box3").innerHTML=h3;
        document.getElementById("box4").innerHTML=h4;
        document.getElementById("box5").innerHTML=h5;
        document.getElementById("box6").innerHTML=h6; 
    })

 <div id="box"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    <div id="box4"></div>
    <div id="box5"></div>
    <div id="box6"></div>

  #box,#box2,#box3,#box4,#box5,#box6{
            width:200px;
            height:200px;
            margin:20px;
            padding:20px;
            border:4px solid #f00;
            background-color:#000;
            color:#eee;
            float:left;
        }

 

以上是我把所有的取高度的方法都用jquery給取出值並放在各自的框中

一、先來這個我平時用的比較多的，height

它主要是返回元素的高度或者說這個div的內容的高度，它是jquery對像，如果只是想取到某個內容的高度，那完全可以使用這個，按照上面所設置的參數，得到的就是200，如圖h1：

二、也是平時經常用到的offsetheight

它返回的高度是內容高+padding+邊框，但是注意哦，木有加margin哦，當然一般也木有啥需要把margin加進去的，以上代碼為例，結果顯示上圖h2；

對了，為什么這個offsetheight的用法和height的用法不一樣的，因為offsetHeight是js對象所能支持的方法，而$("")所獲得的是一個jquery對象，他是不支持offsetHeight的。所以只能用js方式來獲取啦。

三、我么怎么用的clientHeight和scrollHeight

clientHeight在頁面上返回內容的可視高度（不包括邊框，邊距或滾動條），結果顯示上圖h3；

scrollHeight返回整個元素的高度（包括帶滾動條的隱蔽的地方），它帶着滾動條呢，但是一般會用到滾動條的地步么，好吧，我沒用到過，也許我寫的代碼還不夠多，結果顯示上圖h4；

四、關於innerheight和outerheight

這倆我也不咋用過，但是這看名字就基本知道啥區別啥意思了的感覺

innerHeight，inner,inner,里面的里面的，那就是不包括菜單欄、工具欄以及滾動條等的高度只看里面的外面的忽視。為匹配的元素集合中獲取第一個元素的當前計算高度值,包括padding，但是不包括border，結果顯示上圖h5。

outerheight顧名思義，outer了都，外面的都要了，獲取元素集合中第一個元素的當前計算高度值,包括padding，border和選擇性的margin。返回一個整數（不包含“px”）表示的值 ，或如果在一個空集合上調用該方法，則會返回 null。

在.outerHeight()計算中總是包含padding-top ,padding-bottom 和 border-top，border-bottom ；如果includeMargin參數是true，那么margin (top 和 bottom)也會被包含。

 

我完全沒考慮過瀏覽器兼容性問題。。。。后面自己再慢慢琢磨吧