javascript - `document.documentElement` 的 offsetHeight 行为不同

问题描述

我知道offsetHeight给我元素的 CSS 高度的概念，包括边框和填充以及滚动条宽度/高度（如果存在）并且当我在我的 html 中有元素时完美工作，即

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>  
    #content {
      width: 400px;
      height: 100px;
      overflow-y: scroll;
      border: 2px solid black;
    }
  </style>
</head>
<body>
  <div id="content">
      There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
  </div>
</body>
<script>

const $div = document.getElementById('content');

console.log("CLIENT HEIGHT ", $div.clientHeight);
console.log("SCROLL HEIGHT ", $div.scrollHeight);
console.log("OFFSET HEIGHT ", $div.offsetHeight);

</script>
</html>

输出：


"CLIENT HEIGHT "
100
"SCROLL HEIGHT "
234
"OFFSET HEIGHT "
104

但是，当我打开浏览器控制台并做同样的事情时，document.documentElement我得到了这个：

你可以看到offsetHeight它也包括内容，并且类似于scrollHeight莫名其妙！如果你请纠正我哪里出错了，我很困惑......谢谢！:D

标签： javascripthtmlcss

javascript - `document.documentElement` 的 offsetHeight 行为不同

问题描述

解决方案

推荐阅读