scrollHeight，clientHeight，offsetHeight在各個瀏覽器下的區別

document.body是DOM中Document物件裡的body節點， document.documentElement是文件物件根節點(html)的參考。

以下內容在下測試，皆為親測結果~

瀏覽器版本分別是：IE11、Firefox 53.0.3(64位元)、chrome 58.0. 3029.110 (64-bit) 

測試程式js部分程式碼：

##1.document.documentElement.scrollHeight與document.body.scrollHeight比較

IE瀏覽器下：

      h1=document.documentElement.scrollHeight ;   //html標籤下內容的實際高度,包含body標籤的border,margin,padding；

      h2=document.body.scrollHeight;                     //body 標記下的包括body標籤的border，margin;

       計算結果：h1=h2+上下border(body的邊框)+上下margin(body的內邊距)；

Firefox瀏覽器下：

      h1= document.documentElement.scrollHeight;  //html標籤下內容的實際高度,包含身體標籤的border,margin,padding；

##       標籤下包括padding在內的樣式實際高度，不包括body標籤的border，margin;

     計算結果： h1=h2+上下border(body的邊框)+上下margin(body的內邊距)；

 //  Firefox瀏覽器與IE瀏覽器兩種情況下運算方式相同，Chrome瀏覽器的運算方式有點差異

Chrome瀏覽器下：

      h1=document.documentElement.scrollHeight;      //html標籤下內容的實際高度,包含身體標籤的border,margin,padding;

     h2=docum.body.scroll;

#     

     計算結果：h1=h2;

  2.##d#ocument.documentElement.clientHeight與document. body.clientHeight比較

 

IE瀏覽器下：

      h3=document.documentElement.clientHeight;   //網頁內容可見部分的高度，隨著瀏覽器視窗大小的變化而變化

      h4=document.body.clientHeight;                     //body標籤下內容上的實際高度,包括body標籤的padding,不包​​含標的標籤的

Firefox瀏覽器下：

      h3= document.documentElement.clientHeight;   //網頁內容可見部分的高度，隨著瀏覽器視窗大小的變化而變化

## h4=document.body.clientHeight； /  Firefox瀏覽器與IE瀏覽器兩種情況下計算方法相同，Chrome瀏覽器的計算方式有點差異

Chrome瀏覽器下：

      h3=document.documentElement .clientHeight;      //網頁內容可見部分的高度，隨著瀏覽器視窗大小的變化而變化       h4=document.body.clientHeight;       padding,不包​​括body標籤的border,margin,；    

    

3.

#d

ocument.documentElement.offsetHeight與document.body.offsetHeight比較   IE瀏覽器下：      h5=document.documentElement.offsetHeight;   //html標籤下內容的實際高度,包括body標籤的border,margin,padding；

      h6=document.body.offsetHeight;                     //body標籤下的實際高度,包含標籤下的內容

##        計算結果：h5=h6+margin(body標籤的);

Firefox瀏覽器下：

      h5= document.documentElement.offsetHeight;     h5= document.documentElement.offsetHeight;     h5= document.documentElement.offsetHeight; ¡ 的實際高度,包括body標籤的border,margin,padding；

      h6=document.body.offsetHeight;       h6=document.body.offsetHeight;         h6=document.body.offsetHeight;                      //body標籤下內容的實際高度,包含身體標籤的border,padding，不包含margingin#11005的);

 //  Firefox瀏覽器與IE瀏覽器兩種情況下計算方法相同，Chrome瀏覽器的計算方式有點差異

Chrome瀏覽器下：

      h5=document.documentElement.offsetHeight;      //html標籤下內容的實際高度,包含body標籤的border,margin,padding;

##     h6=documight.body.padding；

##   . //body標籤下內容的實際高度,包括body標籤的border,padding，不包括margin； 

    計算結果：h5=h6+margin(body標籤的);

以上三個瀏覽器，

當body標籤的margin為0時，h5=h6;

 

以上是scrollHeight，clientHeight，offsetHeight在各個瀏覽器下的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！