clientHeight、offsetHeight 和 scrollHeight
生活随笔
收集整理的這篇文章主要介紹了
clientHeight、offsetHeight 和 scrollHeight
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
2019獨角獸企業重金招聘Python工程師標準>>>
window.screen.availWidth?????返回當前屏幕寬度(空白空間)? window.screen.availHeight?????返回當前屏幕高度(空白空間)? window.screen.width?????返回當前屏幕寬度(分辨率值)? window.screen.height?????返回當前屏幕高度(分辨率值)? window.document.body.offsetHeight;?????返回當前網頁高度? window.document.body.offsetWidth;?????返回當前網頁寬度? clientHeight與offsetHeight的區別許多文章已經介紹了clientHeight和offsetHeight的區別，就是clientHeight的值不包括scrollbar的高度，而offsetHeight的值包括了scrollbar的高度。然而，clientHeight和offsetHeight的值到底由什么組成的呢？如何計算這兩個數的值？1.?clientHeight和offsetHeight的值由什么決定？假如我們有以下的DIV，主要顯示的文字為"This?is?the?main?body?of?DIV"。如上圖所示，clientHeight的值由DIV內容的實際高度和CSS中的padding值決定，而offsetHeight的值由DIV內容的實際高度，CSS中的padding值，scrollbar的高度和DIV的border值決定；至于CSS中的margin值，則不會影響?clientHeight和offsetHeight的值。2.?CSS中的Height值對clientHeight和offsetHeight有什么影響？首先，我們看一下CSS中Height定義的是什么的高度。如在本文最后部分“APPENDIX示例代碼”（注：以下稱為“示例代碼”）中，innerDIVClass的Height值設定為50px，在IE下計算出來的值如下所示。也就是說，在IE里面，CSS中的Height值定義了?DIV包括padding在內的高度（即offsetHeight的值）；在Firefox里面，CSS中的Height值只定義的DIV實際內容的高度，padding并沒有包括在這個值里面(70?=?50?+?10?*?2)。in?IE: innerDiv.clientHeight:?46 innerDiv.offsetHeight:?50 outerDiv.clientHeight:?0 outerDiv.offsetHeight:?264in?Firfox: innerDiv.clientHeight:?70 innerDiv.offsetHeight:?74 outerDiv.clientHeight:?348 outerDiv.offsetHeight:?362在上面的示例中，也許你會很奇怪，為什么在IE里面outerDiv.clientHeight的值為0。那是因為示例代碼中，沒有定義?outerDIVClass的Height值，這時，在IE里面，則clientHeight的值是無法計算的。同樣，在示例代碼中，如果將?innerDIVClass中的Height值去年，則innerDIV.clientHeight的值也為0。(注：在Firefox下不存在這種情況)。如果CSS中Height值小于DIV要顯示內容的高度的時候呢（當CSS中沒有定義overflow的行為時）？在IE里面，整個?clientHeight（或者offsetHeight）的值并沒有影響，DIV會自動被撐大；而在Firefox里面，DIV是不會被撐開的。如在示例代碼中，將innerDivClass的Height值設為0，則計算結果如下所示。IE里面的DIV被撐開，其clientHeight值等于內容的高度與padding*2的和；而Firefox里面，文字將溢出DIV的邊界，其clientHeight值正好是padding值的兩倍。前兩天修改代碼時接觸到網頁高度和可視區域高度的概念，發現clientHeight、offsetHeight、scrollHeight在不同的瀏覽器里會有不同的結果，于是做了一下測試。 HTML?4.01下的測試 測試代碼如下： <!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN"> <html> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=UTF-8"?/> <title>clientHeight、offsetHeight和scrollHeight?測試</title> </head> <body><div?id="info"></div> <script?type="text/javascript"> <!-- var?info?=?document.getElementByIdx_x_x("info"); var?infoStr?=?"<!DOCTYPE?HTML?PUBLIC?\"-//W3C//DTD?HTML?4.01?Transitional//EN\"><br?/><html><br?/><br?/>";function?SetInfoStr() {infoStr?+=?"info.style.width?=?"?+?info.style.width?+?"<br?/>"?+"info.style.height?=?"?+?info.style.height?+?"<br?/>"?+"document.body.clientHeight?=?"?+?document.body.clientHeight?+?"<br?/>"?+"document.body.offsetHeight?=?"?+?document.body.offsetHeight?+?"<br?/>"?+"document.body.scrollHeight?=?"?+?document.body.scrollHeight?+?"<br?/>"?+"document.documentElement.clientHeight?=?"?+?document.documentElement.clientHeight?+?"<br?/><br?/>"; }info.style.width?=?"0px"; info.style.height?=?"0px"; SetInfoStr();info.style.width?=?"2000px"; info.style.height?=?"0px"; SetInfoStr();info.style.width?=?"0px"; info.style.height?=?"2000px"; SetInfoStr();info.style.width?=?"2000px"; info.style.height?=?"2000px"; SetInfoStr();infoStr?+=?"<br?/><a?href=\"http://witmax.cn\">晴楓</a>?制作"; info.innerHTML?=?infoStr; --> </script> </body> </html> 測試使用現在主流的四個瀏覽器：IE、Firefox、Opera、Chrome。數據太多，測試結果不予列出。 HTML?4.01下的測試結果分析： document.body.clientHeight 在各個瀏覽器中都是等于內容可視區域的高度。內容可視區域是指瀏覽器最后一個工具條以下到狀態欄以上的區域，與頁面內容無關，如有滾動條的話則排除滾動條所占的區域。因為各瀏覽器對寬度超過屏幕寬度、高度為0的div是否會使屏幕出現滾動條理解不一，因此測試結果會略有不同。測試結果顯示Firefox不顯示滾動條，IE、Opera、Chrome都會顯示滾動條。 document.body.offsetHeight IE和Opera下該值一直等于document.body.clientHeight+滾動條高度+窗口邊框（IE為4，Opera為0），即瀏覽器最后一個工具條以下到狀態欄以上的區域的高度。 Firefox下該值等于網頁內容實際高度，即body上下border外延之間的距離（包括body的border和padding、不包括body的margin，通過對body標簽增加樣式對比結果可知），可小于document.body.clientHeight。 注：body的border和padding默認值為0px，margin-top和margin-bottom默認值IE為15px、其他為8px。 Chrome下該值等于網頁內容實際高度（定義同上）；但當網頁內容實際高度于document.body.clientHeight時，該值等于document.body.clientHeight-body的margin寬度。 document.body.scrollHeight IE下該值等于網頁內容實際高度（定義同上）+body的上下magin寬度，可小于document.body.clientHeight。 Firefox、Opera、Chrome下該值等于網頁內容實際高度（定義同上）+body的上下magin寬度；但當等于網頁內容實際高度（定義同上）+body的上下magin寬度小于document.body.clientHeight時，該值等于document.body.clientHeight。 document.documentElement.clientHeight IE下該值一直為0。 Firefox和Opera下該值等于網頁內容實際高度（定義同上）+body的上下magin寬度，可小于document.body.clientHeight。 Chrome下該值等于document.body.scrollHeight。 同理，clientWidth、offsetWidth?和?scrollWidth?的解釋與上面相同，只是把高度換成寬度即可。 出于瀏覽器兼容的考慮，要獲取頁面的實際高度就需要區別獲取。顯得麻煩。 注：不指定doctype，結果與上述測試相同，即HTML?4.01是瀏覽器的默認渲染模式。XHTML?1.1下的測試 下面修改HTML文檔的doctype，只修改了前兩行代碼，將測試代碼改為如下：<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.1//EN"?"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html?xmlns="http://www.w3.org/1999/xhtml"?> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=UTF-8"?/> <title>clientHeight、offsetHeight和scrollHeight?測試</title> </head> <body><div?id="info"></div> <script?type="text/javascript"> <!-- var?info?=?document.getElementByIdx_x_x("info"); var?infoStr?=?"<!DOCTYPE?html?PUBLIC?\"-//W3C//DTD?XHTML?1.1//EN\"?\"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd\"><br?/><html?xmlns=\"http://www.w3.org/1999/xhtml\"?><br?/><br?/>";function?SetInfoStr() {infoStr?+=?"info.style.width?=?"?+?info.style.width?+?"<br?/>"?+"info.style.height?=?"?+?info.style.height?+?"<br?/>"?+"document.body.clientHeight?=?"?+?document.body.clientHeight?+?"<br?/>"?+"document.body.offsetHeight?=?"?+?document.body.offsetHeight?+?"<br?/>"?+"document.body.scrollHeight?=?"?+?document.body.scrollHeight?+?"<br?/>"?+"document.documentElement.clientHeight?=?"?+?document.documentElement.clientHeight?+?"<br?/><br?/>"; }info.style.width?=?"0px"; info.style.height?=?"0px"; SetInfoStr();info.style.width?=?"2000px"; info.style.height?=?"0px"; SetInfoStr();info.style.width?=?"0px"; info.style.height?=?"2000px"; SetInfoStr();info.style.width?=?"2000px"; info.style.height?=?"2000px"; SetInfoStr();infoStr?+=?"<br?/><a?href=\"http://witmax.cn\">晴楓</a>?制作"; info.innerHTML?=?infoStr; --> </script> </body> </html>依然使用上述四個瀏覽器——IE、Firefox、Opera、Chrome進行測試。數據太多，測試結果不予列出。 XHTML?1.1下的測試結果分析： document.body.clientHeight?/?document.body.offsetHeight 都相等，且各瀏覽器表現一致，都等于頁面內容實際高度（定義同上），最小可為0。 document.body.scrollHeight IE、Firefox、Opera表現相同，都等于document.body.clientHeight和document.body.offsetHeight，最小可為0。 Chrome下該值等于HTML?4.01下的document.body.scrollHeight。 document.documentElement.clientHeight 各瀏覽器表現一致，都等于內容可視區域的高度（定義同上），等于HTML?4.01下的document.body.clientHeight值。 注：指定doctype為<!DOCTYPE?HTML>，結果與上述測試相同，即HTML?5延續了XHTML?1.1的一些規范。總???結 要保證瀏覽器兼容，建議是采用XHTML?1.1，這樣便可以使用document.body.clientHeight或document.body.offsetHeight獲得頁面的實際高度，使用document.documentElement.clientHeight獲得內容可視區域的高度。因為HTML?5標準并沒有被所有主流瀏覽器全部支持，所以暫不推薦使用，當然這將是未來的發展趨勢。最后，關于doctype的知識建議學習下《用doctype激活瀏覽器模式》。轉載于:https://my.oschina.net/meng527/blog/481219
總結
以上是生活随笔為你收集整理的clientHeight、offsetHeight 和 scrollHeight的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 抖音检测注入框架分析
- 下一篇： java实现HTTP请求的三种方式