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

源自：9-19 网页尺寸scrollHeight

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

<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>

為什麼會有這些差異？

提问者：sz_yeefun 2016-09-07 21:05

个回答

慕村1994845

2017-02-09 21:18:37

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

0
安静的学习

2016-09-07 22:25:48

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

0