點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

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

來源：懂視網責編：小采時間：2020-11-27 20:19:59

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

scrollHeight，clientHeight，offsetHeight在各個瀏覽器下的區別:document.body是DOM中Document對象里的body節點， document.documentElement是文檔對象根節點(html)的引用。以下內容在<!DOCTYPE html>下測試，均為親測結果~瀏覽器版本分別是：IE11、Firefox 53.0.3(64位)、chrome 58

推薦度：

點擊下載本文 文檔為doc格式

導讀scrollHeight，clientHeight，offsetHeight在各個瀏覽器下的區別:document.body是DOM中Document對象里的body節點， document.documentElement是文檔對象根節點(html)的引用。以下內容在<!DOCTYPE html>下測試，均為親測結果~瀏覽器版本分別是：IE11、Firefox 53.0.3(64位)、chrome 58

document.body是DOM中Document對象里的body節點， document.documentElement是文檔對象根節點(html)的引用。

以下內容在<!DOCTYPE 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標簽下包括padding在內的樣式實際高度，不包括body標簽的border，margin;

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

Firefox瀏覽器下：

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

h2=document.body.scrollHeight; //body標簽下包括padding在內的樣式實際高度，不包括body標簽的border，margin;

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

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

Chrome瀏覽器下：

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

h2=document.body.scrollHeight;

計算結果：h1=h2;

2.document.documentElement.clientHeight與document.body.clientHeight比較

IE瀏覽器下：

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

h4=document.body.clientHeight; //body標簽下內容的實際高度,包括body標簽的padding,不包括body標簽的border,margin,；

Firefox瀏覽器下：

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

h4=document.body.clientHeight; //body標簽下內容的實際高度,包括body標簽的padding,不包括body標簽的border,margin,；

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

Chrome瀏覽器下：

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

h4=document.body.clientHeight; //body標簽下內容的實際高度,包括body標簽的padding,不包括body標簽的border,margin,；

3.document.documentElement.offsetHeight與document.body.offsetHeight比較

IE瀏覽器下：

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

h6=document.body.offsetHeight; //body標簽下內容的實際高度,包括body標簽的border,padding，不包括margin；

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

Firefox瀏覽器下：

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

h6=document.body.offsetHeight; //body標簽下內容的實際高度,包括body標簽的border,padding，不包括margin；

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

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

Chrome瀏覽器下：

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

h6=document.body.offsetHeight; //body標簽下內容的實際高度,包括body標簽的border,padding，不包括margin；

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

以上三個瀏覽器，當body標簽的margin為0時，h5=h6;

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

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

推薦度：

點擊下載本文 文檔為doc格式

標簽：瀏覽器的區別各個瀏覽器

熱門焦點

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

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

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

最新推薦

猜你喜歡

熱門推薦