為什麼用不同代碼獲取網頁內容高度，會有這些差異？-慕课网

為什麼用不同代碼獲取網頁內容高度，會有這些差異？

来源：9-19 网页尺寸scrollHeight

sz_yeefun

2016-09-07 21:05

<body>
<script type="text/javascript">
  var w1 = document.documentElement.scrollWidth;
  var h1 = document.documentElement.scrollHeight;
  document.write(w1 + "*" + h1 + "<br />"); //結果為370*8

  var w2 = document.body.scrollWidth;
  var h2 = document.body.scrollHeight;
  document.write(w2 + "*" + h2 + "<br />"); //結果為370*600

  var w3 = document.documentElement.scrollWidth
  || document.body.scrollWidth;
  var h3 =document.documentElement.scrollHeight
  || document.body.scrollHeight;
  document.write(w3 + "*" + h3 + "<br />"); //結果為370*52

  var w4 = document.documentElement.clientWidth;
  var h4 = document.documentElement.clientHeight;
  document.write(w4 + "*" + h4 + "<br />"); //結果為370*600

  var w5 = document.body.clientWidth;
  var h5 = document.body.clientHeight;
  document.write(w5 + "*" + h5 + "<br />"); //結果為354*72

  var w6 = window.innerWidth;
  var h6 = window.innerHeight;
  document.write(w6 + "*" + h6 + "<br />"); //結果為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); //結果為370*600
</script>
</body>

為什麼會有這些差異？

写回答关注

2回答

慕村1994845

2017-02-09 21:18:37

对象不同，其得到的结果也不尽相同；对于body，内容的增减也会导致其高度变化

0 0
安静的学习

2016-09-07 22:25:48

scrollHeight 获取网页内容高度和宽度。（浏览器的视口，包括工具栏和滚动条）
clientHeight获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）
主要是看浏览器的可视区域，scrollHeight 滚动条下拉高度就会产生变化

0 0

JavaScript进阶篇

本课程从如何插入JS代码开始，带您进入网页动态交互世界

468194 学习 · 21891 问题

查看课程

相似问题

只是差在有無引號，為什麼輸出的結果會不同？

回答 1

為什麼當函數名是 window 時，網頁就打不開了？

回答 2

為什麼代碼裡沒 <tbody>，但它還是會出現？

回答 1

為什麼要獲取 input 節點對象的內容時，無論在 i 輸入什麼數字都顯示不出來？

回答 2

為什麼這樣寫就會變成undefined，return是什麼魔力看不明白

回答 1

打开慕课网App查看更多内容