<body>
<script?type="text/javascript">
??var?w1?=?document.documentElement.scrollWidth;
??var?h1?=?document.documentElement.scrollHeight;
??document.write(w1?+?"*"?+?h1?+?"<br?/>");?//結(jié)果為370*8
??var?w2?=?document.body.scrollWidth;
??var?h2?=?document.body.scrollHeight;
??document.write(w2?+?"*"?+?h2?+?"<br?/>");?//結(jié)果為370*600
??var?w3?=?document.documentElement.scrollWidth
??||?document.body.scrollWidth;
??var?h3?=document.documentElement.scrollHeight
??||?document.body.scrollHeight;
??document.write(w3?+?"*"?+?h3?+?"<br?/>");?//結(jié)果為370*52
??var?w4?=?document.documentElement.clientWidth;
??var?h4?=?document.documentElement.clientHeight;
??document.write(w4?+?"*"?+?h4?+?"<br?/>");?//結(jié)果為370*600
??var?w5?=?document.body.clientWidth;
??var?h5?=?document.body.clientHeight;
??document.write(w5?+?"*"?+?h5?+?"<br?/>");?//結(jié)果為354*72
??var?w6?=?window.innerWidth;
??var?h6?=?window.innerHeight;
??document.write(w6?+?"*"?+?h6?+?"<br?/>");?//結(jié)果為370*600
??var?w7?=?window.innerWidth
??||?document.documentElement.clientWidth
??||?document.body.clientWidth;
??var?h7?=?window.innerHeight
??||?document.documentElement.clientHeight
??||?document.body.clientHeight;
??document.write(w7?+?"*"?+?h7);?//結(jié)果為370*600
</script>
</body>
為什麼會有這些差異?
2017-02-09
對象不同,其得到的結(jié)果也不盡相同;對于body,內(nèi)容的增減也會導致其高度變化
2016-09-07
scrollHeight 獲取網(wǎng)頁內(nèi)容高度和寬度。(瀏覽器的視口,包括工具欄和滾動條)
clientHeight獲得瀏覽器窗口的尺寸(瀏覽器的視口,不包括工具欄和滾動條)
主要是看瀏覽器的可視區(qū)域,scrollHeight 滾動條下拉高度就會產(chǎn)生變化